@drivy/cobalt 1.3.3 → 1.4.1

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/Alerter/index.js

@@ -24,7 +24,6 @@ const useAlerts = () => {
         sendAlert: ({ message, status, duration, }) => toaster.create({
             description: message,
             type: status,
-            placement: "bottom",
             duration: duration !== null && duration !== void 0 ? duration : computeTimeDurationFromText(message),
         }),
     };

package/components/Alerter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n  InfoFilledIcon,\n  CheckCircleIcon,\n  ContextualWarningCircleFilledIcon,\n  IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n  content: string | React.ReactNode\n): number => {\n  if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n  return Math.min(\n    Math.max(DEFAULT_TIMEOUT, content.length * 90),\n    MAX_TEXT_TIMEOUT\n  )\n}\n\nconst toaster = createToaster({\n  overlap: true,\n  gap: 12,\n  placement: \"bottom\",\n  max: 12,\n})\n\nexport const useAlerts = () => {\n  return {\n    sendAlert: ({\n      message,\n      status,\n      duration,\n    }: {\n      message: React.ReactNode\n      status: AlertStatus\n      duration?: number\n    }) =>\n      toaster.create({\n        description: message,\n        type: status,\n        placement: \"bottom\",\n        duration: duration ?? computeTimeDurationFromText(message),\n      }),\n  }\n}\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: typeof InfoFilledIcon } = {\n  info: InfoFilledIcon,\n  success: CheckCircleIcon,\n  error: ContextualWarningCircleFilledIcon,\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"infoAlt\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst Alerter = ({ children }: PropsWithChildren) => {\n  return (\n    <>\n      {children}\n      <Portal>\n        <Toaster toaster={toaster} className=\"cobalt-alerter\">\n          {(toast) => {\n            const status = toast.type as AlertStatus\n            const IconComp = STATUS_ICONS_MAP[status]\n            return (\n              <Toast.Root className={cx(\"cobalt-alert\")} key={toast.id}>\n                <div className=\"cobalt-alert__wrapper\">\n                  <IconComp size={20} color={STATUS_ICON_COLOR_MAP[status]} />\n                  <Toast.Description>{toast.description}</Toast.Description>\n                </div>\n              </Toast.Root>\n            )\n          }}\n        </Toaster>\n      </Portal>\n    </>\n  )\n}\n\nexport default Alerter\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,eAAe,GAAG,IAAI,CAAA;AAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAA;AAI7B,MAAM,2BAA2B,GAAG,CAClC,OAAiC,KACvB;IACV,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,eAAe,CAAA;AACvD,IAAA,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,EAC9C,gBAAgB,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAC5B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,SAAS,EAAE,QAAQ;AACnB,IAAA,GAAG,EAAE,EAAE;AACR,CAAA,CAAC,CAAA;AAEK,MAAM,SAAS,GAAG,MAAK;IAC5B,OAAO;AACL,QAAA,SAAS,EAAE,CAAC,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,KACC,OAAO,CAAC,MAAM,CAAC;AACb,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,KAAA,CAAA,GAAR,QAAQ,GAAI,2BAA2B,CAAC,OAAO,CAAC;SAC3D,CAAC;KACL,CAAA;AACH,EAAC;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAClD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,EAAA,EAClD,CAAC,KAAK,KAAI;AACT,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAmB,CAAA;AACxC,gBAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AACzC,gBAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA;oBACtD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,wBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAI,CAAA;wBAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAC,WAAW,CAAqB,CACtD,CACK,EACd;AACH,aAAC,CACO,CACH,CACR,EACJ;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Alerter/index.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\"\nimport { Toast, Toaster, createToaster, Portal } from \"@ark-ui/react\"\nimport {\n  InfoFilledIcon,\n  CheckCircleIcon,\n  ContextualWarningCircleFilledIcon,\n  IconColorsType,\n} from \"../Icon\"\nimport cx from \"classnames\"\n\nconst DEFAULT_TIMEOUT = 3000\nconst MAX_TEXT_TIMEOUT = 9000\n\nexport type AlertStatus = \"info\" | \"success\" | \"error\"\n\nconst computeTimeDurationFromText = (\n  content: string | React.ReactNode\n): number => {\n  if (typeof content !== \"string\") return DEFAULT_TIMEOUT\n  return Math.min(\n    Math.max(DEFAULT_TIMEOUT, content.length * 90),\n    MAX_TEXT_TIMEOUT\n  )\n}\n\nconst toaster = createToaster({\n  overlap: true,\n  gap: 12,\n  placement: \"bottom\",\n  max: 12,\n})\n\nexport const useAlerts = () => {\n  return {\n    sendAlert: ({\n      message,\n      status,\n      duration,\n    }: {\n      message: React.ReactNode\n      status: AlertStatus\n      duration?: number\n    }) =>\n      toaster.create({\n        description: message,\n        type: status,\n        duration: duration ?? computeTimeDurationFromText(message),\n      }),\n  }\n}\n\nconst STATUS_ICONS_MAP: { [k in AlertStatus]: typeof InfoFilledIcon } = {\n  info: InfoFilledIcon,\n  success: CheckCircleIcon,\n  error: ContextualWarningCircleFilledIcon,\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in AlertStatus]: IconColorsType } = {\n  info: \"infoAlt\",\n  success: \"success\",\n  error: \"error\",\n}\n\nconst Alerter = ({ children }: PropsWithChildren) => {\n  return (\n    <>\n      {children}\n      <Portal>\n        <Toaster toaster={toaster} className=\"cobalt-alerter\">\n          {(toast) => {\n            const status = toast.type as AlertStatus\n            const IconComp = STATUS_ICONS_MAP[status]\n            return (\n              <Toast.Root className={cx(\"cobalt-alert\")} key={toast.id}>\n                <div className=\"cobalt-alert__wrapper\">\n                  <IconComp size={20} color={STATUS_ICON_COLOR_MAP[status]} />\n                  <Toast.Description>{toast.description}</Toast.Description>\n                </div>\n              </Toast.Root>\n            )\n          }}\n        </Toaster>\n      </Portal>\n    </>\n  )\n}\n\nexport default Alerter\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,eAAe,GAAG,IAAI,CAAA;AAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAA;AAI7B,MAAM,2BAA2B,GAAG,CAClC,OAAiC,KACvB;IACV,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,eAAe,CAAA;AACvD,IAAA,OAAO,IAAI,CAAC,GAAG,CACb,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,EAC9C,gBAAgB,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,aAAa,CAAC;AAC5B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,GAAG,EAAE,EAAE;AACP,IAAA,SAAS,EAAE,QAAQ;AACnB,IAAA,GAAG,EAAE,EAAE;AACR,CAAA,CAAC,CAAA;AAEK,MAAM,SAAS,GAAG,MAAK;IAC5B,OAAO;AACL,QAAA,SAAS,EAAE,CAAC,EACV,OAAO,EACP,MAAM,EACN,QAAQ,GAKT,KACC,OAAO,CAAC,MAAM,CAAC;AACb,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,KAAA,CAAA,GAAR,QAAQ,GAAI,2BAA2B,CAAC,OAAO,CAAC;SAC3D,CAAC;KACL,CAAA;AACH,EAAC;AAED,MAAM,gBAAgB,GAAkD;AACtE,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,KAAK,EAAE,iCAAiC;CACzC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAED,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAqB,KAAI;AAClD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,EAAA,EAClD,CAAC,KAAK,KAAI;AACT,gBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAmB,CAAA;AACxC,gBAAA,MAAM,QAAQ,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAA;AACzC,gBAAA,QACE,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAA;oBACtD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACpC,wBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,qBAAqB,CAAC,MAAM,CAAC,EAAI,CAAA;wBAC5D,KAAC,CAAA,aAAA,CAAA,KAAK,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAC,WAAW,CAAqB,CACtD,CACK,EACd;AACH,aAAC,CACO,CACH,CACR,EACJ;AACH;;;;"}

package/components/Form/Stepper.js

@@ -80,12 +80,20 @@ class Stepper extends PureComponent {
                 "cobalt-Stepper--error": status === "error",
             }) },
             React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
-                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, onPointerDown: () => this.onPointerDown(this.onDecrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button", "data-label": "stepper-minus" },
+                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, ...(!disabled && {
+                        onPointerDown: () => this.onPointerDown(this.onDecrement),
+                        onPointerUp: this.onPointerUp,
+                        onPointerLeave: this.onPointerUp,
+                    }), type: "button", "data-label": "stepper-minus" },
                     React.createElement(MinusIcon, null)),
                 React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
                     children ? children(this.state.value) : this.state.value,
                     React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
-                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, onPointerDown: () => this.onPointerDown(this.onIncrement), onPointerUp: this.onPointerUp, onPointerLeave: this.onPointerUp, type: "button", "data-label": "stepper-plus" },
+                React.createElement(DefaultButton, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, ...(!disabled && {
+                        onPointerDown: () => this.onPointerDown(this.onIncrement),
+                        onPointerUp: this.onPointerUp,
+                        onPointerLeave: this.onPointerUp,
+                    }), type: "button", "data-label": "stepper-plus" },
                     React.createElement(PlusIcon, null)))));
     }
 }

package/components/Form/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            onPointerDown={() => this.onPointerDown(this.onDecrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n            data-label=\"stepper-minus\"\n          >\n            <MinusIcon />\n          </DefaultButton>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            onPointerDown={() => this.onPointerDown(this.onIncrement)}\n            onPointerUp={this.onPointerUp}\n            onPointerLeave={this.onPointerUp}\n            type={\"button\"}\n            data-label=\"stepper-plus\"\n          >\n            <PlusIcon />\n          </DefaultButton>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport DefaultButton from \"../Buttons/DefaultButton\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n) => {\n  let enforcedValue = value\n  if (typeof max !== \"undefined\") {\n    enforcedValue = Math.min(enforcedValue, max)\n  }\n  if (typeof min !== \"undefined\") {\n    enforcedValue = Math.max(enforcedValue, min)\n  }\n  return enforcedValue\n}\n\ntype Props = {\n  value: number\n  name?: string\n  disabled?: boolean\n  min?: number\n  max?: number\n  step: number\n  onChange?: (value: number) => void\n  children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n  value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n  constructor(props: Props) {\n    super(props)\n\n    if (props.step < 0)\n      throw new Error(\"Incorrect step value. Can't be below zero\")\n\n    this.onDecrement = this.onDecrement.bind(this)\n    this.onIncrement = this.onIncrement.bind(this)\n    this.changeValue = this.changeValue.bind(this)\n    this.onPointerDown = this.onPointerDown.bind(this)\n    this.onPointerUp = this.onPointerUp.bind(this)\n\n    this.state = {\n      value: enforceInRange(props.value, props.min, props.max),\n    }\n  }\n\n  timeout: ReturnType<typeof setTimeout> | null = null\n  interval: ReturnType<typeof setInterval> | null = null\n\n  componentDidUpdate(_prevProps: Props, prevState: State) {\n    if (prevState.value !== this.state.value) {\n      this.changeValue(this.state.value)\n    } else if (this.props.value !== this.state.value) {\n      this.changeValue(this.props.value)\n    }\n  }\n\n  onDecrement = () => {\n    ;(this.props.min !== null || this.state.value > this.props.min) &&\n      this.changeValue(\n        parseFloat((this.state.value - this.props.step).toFixed(10))\n      )\n  }\n\n  onIncrement = () => {\n    ;(this.props.max !== null || this.state.value < this.props.max) &&\n      this.changeValue(\n        parseFloat((this.state.value + this.props.step).toFixed(10))\n      )\n  }\n\n  onPointerDown = (callback: () => void) => {\n    callback()\n    this.timeout && clearTimeout(this.timeout)\n    this.timeout = setTimeout(() => {\n      this.interval && clearInterval(this.interval)\n      this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n    }, AUTO_CHANGE_TIMEOUT_IN_MS)\n  }\n\n  onPointerUp = () => {\n    if (this.interval) {\n      clearInterval(this.interval)\n      this.interval = null\n    }\n    this.timeout && clearTimeout(this.timeout)\n  }\n\n  changeValue = (value: number) => {\n    this.setState(\n      {\n        value: enforceInRange(value, this.props.min, this.props.max),\n      },\n      () => {\n        this.props.onChange && this.props.onChange(this.state.value)\n      }\n    )\n  }\n\n  render() {\n    const { name, status, disabled, min, max, children } = this.props\n\n    return (\n      <div\n        className={classNames(\"cobalt-Stepper\", {\n          \"cobalt-Stepper--disabled\": disabled,\n          \"cobalt-Stepper--success\": status === \"success\",\n          \"cobalt-Stepper--error\": status === \"error\",\n        })}\n      >\n        <div className=\"cobalt-Stepper__Wrapper\">\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === min}\n            {...(!disabled && {\n              onPointerDown: () => this.onPointerDown(this.onDecrement),\n              onPointerUp: this.onPointerUp,\n              onPointerLeave: this.onPointerUp,\n            })}\n            type=\"button\"\n            data-label=\"stepper-minus\"\n          >\n            <MinusIcon />\n          </DefaultButton>\n          <div className=\"cobalt-Stepper__ContentWrapper\">\n            {children ? children(this.state.value) : this.state.value}\n            <input type=\"hidden\" name={name} value={this.state.value} />\n          </div>\n          <DefaultButton\n            className=\"cobalt-Stepper__ActionButton\"\n            disabled={disabled || this.state.value === max}\n            {...(!disabled && {\n              onPointerDown: () => this.onPointerDown(this.onIncrement),\n              onPointerUp: this.onPointerUp,\n              onPointerLeave: this.onPointerUp,\n            })}\n            type=\"button\"\n            data-label=\"stepper-plus\"\n          >\n            <PlusIcon />\n          </DefaultButton>\n        </div>\n      </div>\n    )\n  }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n  children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n  return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}

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":"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"}

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.3.3",
+  "version": "1.4.1",
   "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": "4.9.2",
+    "@ark-ui/react": "5.9.1",
     "@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,10 +59,10 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
     "@types/node": "22.14.1",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
+    "@types/react": "18.3.22",
+    "@types/react-dom": "18.3.7",
     "autoprefixer": "10.4.21",
-    "core-js": "3.41.0",
+    "core-js": "3.42.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
     "eslint-plugin-storybook": "^0.12.0",
@@ -97,8 +96,8 @@
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
-    "ts-jest": "29.3.2",
-    "tsx": "4.19.3",
+    "ts-jest": "29.3.4",
+    "tsx": "4.19.4",
     "typescript": "5.4.5"
   },
   "keywords": [

package/styles/components/Form/Autocomplete/index.scss

@@ -3,6 +3,10 @@
 
   position: relative;
 
+  [data-state="open"] {
+    border-radius: 8px 8px 0 0;
+  }
+
   &__clear-button:not([hidden]) {
     position: absolute;
     right: 6px;
@@ -34,7 +38,7 @@
 
     overflow: hidden;
 
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 8px 8px;
     box-shadow:
       0 2px 2px 0 rgba(0, 0, 0, 0.06),
       0 6px 6px 0 rgba(0, 0, 0, 0.04),

package/styles/components/Form/TagsInput.scss

@@ -0,0 +1,90 @@
+@import "./form";
+
+/* stylelint-disable max-nesting-depth */
+.cobalt- {
+  &TagsField {
+    $self: &;
+
+    @include form-field-container;
+
+    position: relative;
+
+    &__InputContainer {
+      @apply c-text-base c-border c-border-strong c-bg-secondary c-rounded-lg;
+      box-sizing: border-box;
+
+      width: 100%;
+      padding: 10px 12px;
+
+      &:not([data-disabled]):not([data-readonly]) {
+        @apply c-state-interactive c-transition-colors;
+      }
+
+      &--success {
+        @apply c-border-success;
+
+        &:not([data-disabled]):hover,
+        &:not([data-disabled]):focus {
+          @apply c-border-success;
+        }
+      }
+
+      &--error {
+        @apply c-border-error;
+
+        &:not([data-disabled]):hover,
+        &:not([data-disabled]):focus {
+          @apply c-border-error;
+        }
+      }
+
+      &:not([data-disabled]):focus-within {
+        @apply c-border-accent;
+
+        outline: none;
+        box-shadow: inset 0 0 0 1px theme("semanticBorderColor.accent");
+      }
+
+      &[data-disabled] {
+        @apply c-border-base c-text-subdued c-bg-neutral c-cursor-not-allowed;
+
+        * {
+          @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-[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 {
+      @apply c-bg-transparent c-border-none c-font-base c-text-base;
+      width: 100%;
+
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+
+      outline: none;
+    }
+
+    &__Input::placeholder {
+      @apply c-text-subdued;
+      opacity: 0.7;
+    }
+  }
+}
+/* stylelint-enable max-nesting-depth */

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;
 
@@ -29,7 +30,11 @@
   font-weight: 400;
   line-height: 24px;
 
-  border-radius: 4px;
+  border-radius: 8px;
+
+  &:not([readonly]):not([disabled]) {
+    @apply c-state-interactive;
+  }
 
   &:not(:disabled):not(:read-only):hover {
     @apply c-text-base;

package/styles/components/Form/index.scss

@@ -3,6 +3,7 @@
 @import "./Select";
 @import "./TextArea";
 @import "./TextInput";
+@import "./TagsInput";
 @import "./Hint";
 @import "./Fieldset";
 @import "./ComposedField";

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/Alerter/index.d.ts

@@ -5,7 +5,7 @@ export declare const useAlerts: () => {
         message: React.ReactNode;
         status: AlertStatus;
         duration?: number;
-    }) => string | undefined;
+    }) => string;
 };
 declare const Alerter: ({ children }: PropsWithChildren) => React.JSX.Element;
 export default Alerter;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { TagsInput as TagsInputComponent, TagsInputRootProps } from "@ark-ui/react";
+import { IconSources } from "../Icon";
+import { FormElement } from "./form";
+type Props = {
+    icon?: IconSources;
+    forwardedRef?: React.Ref<HTMLInputElement>;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    tags?: string[];
+    onTagsChange?: (tags: string[]) => void;
+    defaultTags?: string[];
+    defaultValue?: string;
+    max?: number;
+} & Omit<FormElement, "value" | "defaultValue" | "max" | "onChange" | "onInputChange"> & React.InputHTMLAttributes<HTMLInputElement> & Omit<TagsInputRootProps, "value" | "inputValue" | "onValueChange">;
+export declare const TagsInputWrapper: ({ status, render, }: {
+    status?: FormElement["status"];
+    render: (className: string) => React.ReactNode;
+}) => React.JSX.Element;
+declare const wrappedComponent: React.ComponentClass<{
+    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;
+    tags?: string[] | undefined;
+    onTagsChange?: ((tags: string[]) => void) | undefined;
+    defaultTags?: string[] | undefined;
+    defaultValue?: string | undefined;
+    max?: number | undefined;
+} & 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;
+    fieldClassName?: string | undefined;
+    fullWidth?: boolean | undefined;
+} & FormElement, any> & {
+    Raw: React.ComponentType<Props>;
+};
+export { wrappedComponent as TagsInput };

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/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}

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;