@drivy/cobalt 1.1.4 → 1.2.0

package/components/Callout/index.js

@@ -11,7 +11,7 @@ const Callout = ({ title, children, status = "info", close, }) => (React.createE
     title && React.createElement("div", { className: "cobalt-Callout__Title" }, title),
     React.createElement("div", null, children),
     close && (React.createElement("button", { className: "cobalt-Callout__Close", onClick: close, type: "button" },
-        React.createElement(CloseIcon, { color: "subduedInteractive", contained: true, size: 16 })))));
+        React.createElement(CloseIcon, { color: "subdued", size: 16, contained: true })))));
 
 export { Callout, Callout as default };
 //# sourceMappingURL=index.js.map

package/components/Callout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <div>{children}</div>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <CloseIcon color=\"subduedInteractive\" contained size={16} />\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE;QAC9B,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO;AACpB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,oBAAoB,EAAC,SAAS,EAAA,IAAA,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CACrD,CACV,CACG;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Callout/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { CloseIcon } from \"../Icon\"\n\nexport interface CalloutProps {\n  children: React.ReactNode\n  title?: string\n  status: \"info\" | \"error\" | \"success\"\n  close?: () => void\n}\n\nexport const Callout = ({\n  title,\n  children,\n  status = \"info\",\n  close,\n}: CalloutProps) => (\n  <div\n    className={cx(\"cobalt-Callout\", {\n      \"cobalt-Callout--info\": status === \"info\",\n      \"cobalt-Callout--error\": status === \"error\",\n      \"cobalt-Callout--success\": status === \"success\",\n    })}\n  >\n    {title && <div className=\"cobalt-Callout__Title\">{title}</div>}\n    <div>{children}</div>\n    {close && (\n      <button className=\"cobalt-Callout__Close\" onClick={close} type=\"button\">\n        <CloseIcon color=\"subdued\" size={16} contained />\n      </button>\n    )}\n  </div>\n)\n\nexport default Callout\n"],"names":[],"mappings":";;;;;AAWa,MAAA,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,KAAK,GACQ,MACb,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE;QAC9B,sBAAsB,EAAE,MAAM,KAAK,MAAM;QACzC,uBAAuB,EAAE,MAAM,KAAK,OAAO;QAC3C,yBAAyB,EAAE,MAAM,KAAK,SAAS;KAChD,CAAC,EAAA;AAED,IAAA,KAAK,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,KAAK,CAAO;AAC9D,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAM,QAAQ,CAAO;AACpB,IAAA,KAAK,KACJ,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAA;AACrE,QAAA,KAAA,CAAA,aAAA,CAAC,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAG,IAAA,EAAA,CAAA,CAC1C,CACV,CACG;;;;"}

package/components/PhotoDropzone/index.js

@@ -162,7 +162,7 @@ const PhotoDropzone = ({ className, description, deletePopoverContent, errorCont
                         onTouchEnd: onDeleteButtonClick, onMouseUp: onDeleteButtonClick, onKeyUp: onDeleteKey },
                         React.createElement(BinIcon, { color: "indigo" })),
                     React.createElement(Popover, { targetRef: deleteButtonRef, isOpen: showDeletePopover, close: closeDeletePopover, placement: "left-start", distance: 12, bodySpacing: false, arrow: true }, deletePopoverContent(onDelete, closeDeletePopover))))) : (React.createElement("div", { className: "cobalt-photo-dropzone__description cobalt-photo-dropzone__description--strong" },
-                React.createElement("p", null, description),
+                description && React.createElement("div", null, description),
                 React.createElement(PlusIcon, null)))),
         React.createElement("input", { ref: fileInputRef, className: "cobalt-photo-dropzone__hidden-input", type: "file", onChange: onFileInputChanged, accept: ACCEPTED_PHOTOS_TYPES.map((ext) => `.${ext}`).join(","), multiple: false })));
 };

package/components/PhotoDropzone/index.js.map

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

package/index.js

@@ -10,7 +10,6 @@ export { Callout } from './components/Callout/index.js';
 export { default as Cell, Cells } from './components/Cell/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
 export { Flag } from './components/Flag/index.js';
-export { Flash } from './components/Flash/index.js';
 export { default as Helper } from './components/Helper/index.js';
 export { CalendarRangePicker } from './components/Calendar/CalendarRangePicker/CalendarRangePicker.js';
 export { CalendarDayPicker } from './components/Calendar/CalendarDayPicker/CalendarDayPicker.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.1.4",
+  "version": "1.2.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -28,7 +28,7 @@
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "5.1.4",
+    "nanoid": "5.1.5",
     "postcss": "8.5.3",
     "tailwindcss": "3.4.17",
     "tippy.js": "6.3.7"
@@ -59,17 +59,17 @@
     "@types/jest": "29.5.14",
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
-    "@types/node": "22.13.10",
+    "@types/node": "22.13.17",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "autoprefixer": "10.4.21",
     "core-js": "3.41.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
-    "eslint-plugin-storybook": "^0.11.6",
+    "eslint-plugin-storybook": "^0.12.0",
     "file-loader": "6.2.0",
     "fs-extra": "11.3.0",
-    "html-entities": "2.5.2",
+    "html-entities": "2.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "nested-object-access": "^0.2.5",
@@ -82,14 +82,14 @@
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "15.6.1",
     "react-test-renderer": "18.3.1",
-    "react-textarea-autosize": "8.5.8",
+    "react-textarea-autosize": "8.5.9",
     "regenerator-runtime": "0.14.1",
     "remark-gfm": "^3.0.1",
     "rollup": "2.79.2",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.86.0",
+    "sass": "1.86.1",
     "sass-loader": "13.3.3",
     "sharp": "0.33.5",
     "sharp-cli": "5.1.0",
@@ -98,7 +98,7 @@
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
-    "ts-jest": "29.2.6",
+    "ts-jest": "29.3.1",
     "tsx": "4.19.3",
     "typescript": "5.4.5"
   },

package/src/tokens/breakpoints.js

@@ -2,12 +2,12 @@ const xs = "480px";
 const sm = "768px";
 const md = "992px";
 const lg = "1200px";
-var require$$0 = {
+var require$$1 = {
 	xs: xs,
 	sm: sm,
 	md: md,
 	lg: lg
 };
 
-export { require$$0 as default, lg, md, sm, xs };
+export { require$$1 as default, lg, md, sm, xs };
 //# sourceMappingURL=breakpoints.js.map

package/src/tokens/colors.js

@@ -33,7 +33,7 @@ const deprecatedSeasonLow = "#BDFFAC";
 const deprecatedSeasonMedium = "#94EA84";
 const deprecatedSeasonHigh = "#73C865";
 const deprecatedSeasonVeryHigh = "#54A949";
-var require$$1 = {
+var require$$2 = {
 	white: white,
 	grey: grey,
 	indigo: indigo,
@@ -53,5 +53,5 @@ var require$$1 = {
 	deprecatedSeasonVeryHigh: deprecatedSeasonVeryHigh
 };
 
-export { amber, blue, coral, require$$1 as default, deprecatedBlueGhost, deprecatedDriver, deprecatedSeasonHigh, deprecatedSeasonLow, deprecatedSeasonMedium, deprecatedSeasonVeryHigh, graphite, green, grey, indigo, purple, red, turquoise, white };
+export { amber, blue, coral, require$$2 as default, deprecatedBlueGhost, deprecatedDriver, deprecatedSeasonHigh, deprecatedSeasonLow, deprecatedSeasonMedium, deprecatedSeasonVeryHigh, graphite, green, grey, indigo, purple, red, turquoise, white };
 //# sourceMappingURL=colors.js.map

package/src/tokens/zIndexes.js

@@ -7,7 +7,7 @@ const header = 30;
 const sidepanel = 80;
 const modal = 90;
 const alert = 100;
-var require$$2 = {
+var require$$3 = {
 	below: below,
 	base: base,
 	above: above,
@@ -32,5 +32,5 @@ var require$$2 = {
 	"autocomplete-popover": 2147483647
 };
 
-export { above, alert, base, below, require$$2 as default, dropdown, header, modal, nav, sidepanel };
+export { above, alert, base, below, require$$3 as default, dropdown, header, modal, nav, sidepanel };
 //# sourceMappingURL=zIndexes.js.map

package/styles/components/Accordion/index.scss

@@ -10,7 +10,7 @@
   }
 
   &accordion__header {
-    @apply c-text-title-xs c-p-sm c-bg-secondary c-cursor-pointer c-gap-sm;
+    @apply c-text-title-xs c-p-sm c-bg-secondary c-cursor-pointer c-state-interactive c-transition-interactive c-gap-sm;
 
     width: 100%;
     display: flex;

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

@@ -1,19 +1,11 @@
 .cob-Button__default {
-  @include semantic-color(
-    buttonBackground,
-    secondaryInteractive,
-    background-color
-  );
-  @include semantic-color(stroke, baseInteractive, border-color);
-  @include semantic-color(buttonLabel, secondaryInteractive, color);
+  @include semantic-color(buttonBackground, secondary, background-color);
+  @include semantic-color(stroke, strong, border-color);
+  @include semantic-color(buttonLabel, secondary, color);
 
   &--primary {
-    @include semantic-color(
-      buttonBackground,
-      primaryInteractive,
-      background-color
-    );
-    @include semantic-color(buttonLabel, primaryInteractive, color);
+    @include semantic-color(buttonBackground, primary, background-color);
+    @include semantic-color(buttonLabel, primary, color);
 
     border-color: transparent;
 
@@ -24,12 +16,8 @@
     }
 
     &.cob-Button__default--destructive {
-      @include semantic-color(
-        buttonBackground,
-        destructiveInteractive,
-        background-color
-      );
-      @include semantic-color(buttonLabel, destructiveInteractive, color);
+      @include semantic-color(buttonBackground, destructive, background-color);
+      @include semantic-color(buttonLabel, destructive, color);
 
       border-color: transparent;
     }

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

@@ -1,10 +1,6 @@
 .cob-Button__ghost {
-  @include semantic-color(buttonLabel, tertiaryInteractive, color);
-  @include semantic-color(
-    buttonBackground,
-    tertiaryInteractive,
-    background-color
-  );
+  @include semantic-color(buttonLabel, tertiary, color);
+  @include semantic-color(buttonBackground, tertiary, background-color);
   border-color: transparent;
 
   box-shadow: none;
@@ -32,11 +28,7 @@
   &[disabled],
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
-    @include semantic-color(
-      buttonBackground,
-      tertiaryInteractive,
-      background-color
-    );
+    @include semantic-color(buttonBackground, tertiary, background-color);
     border-color: transparent;
 
     &:hover,

package/styles/components/Buttons/index.scss

@@ -24,6 +24,7 @@
 }
 
 .cob-Button {
+  @apply c-state-interactive c-transition;
   @include cob-button-sizing(
     $height: 40px,
     $line-height: 20px,
@@ -49,10 +50,6 @@
 
   cursor: pointer;
   user-select: none;
-  transition-property: background-color, border, box-shadow, color, transform,
-    fill;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-out;
   appearance: none;
 
   &:hover {
@@ -97,6 +94,7 @@
   &[disabled],
   &[data-disabled]:not([data-disabled="false"]),
   &.cob-Button--disabled {
+    @apply c-state-none;
     @include semantic-color(buttonBackground, disabled, background-color);
     @include semantic-color(buttonLabel, disabled, color);
     @include semantic-color(stroke, subdued, border-color);

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

@@ -233,7 +233,7 @@
 
     &--endDay.cobalt-CalendarRangePicker__day--active.cobalt-CalendarRangePicker__day--invalid {
       &:after {
-        @apply c-border-error;
+        @apply c-border c-border-error;
         border-width: 2px;
       }
     }
@@ -241,7 +241,7 @@
     //Start day = end day
     &--startDay.cobalt-CalendarRangePicker__day--endDay {
       &:before {
-        @apply c-border-onAccent;
+        @apply c-border c-border-onAccent;
 
         position: absolute;
 
@@ -305,7 +305,7 @@
 }
 
 .tippy-box[data-theme~="range-picker"] {
-  @apply c-border-base;
+  @apply c-border c-border-base;
 }
 
 .tippy-box[data-theme~="range-picker"] .tippy-arrow:after {

package/styles/components/Callout/index.scss

@@ -55,7 +55,7 @@
     cursor: pointer;
 
     .cobalt-Icon {
-      transition: fill 0.2s;
+      @apply c-state-interactive c-transition-interactive;
     }
   }
 }

package/styles/components/Chip/index.scss

@@ -5,7 +5,7 @@ $chip-large-height: 50px;
 
 .cobalt- {
   &Chip {
-    @apply c-border c-border-base c-bg-secondary;
+    @apply c-border c-border-base c-bg-secondary c-transition-colors;
 
     position: relative;
 
@@ -21,9 +21,8 @@ $chip-large-height: 50px;
   }
 
   &Chip--interactive {
-    @apply c-border-baseInteractive;
-
     &:not([disabled]) {
+      @apply c-state-interactive;
       cursor: pointer;
     }
   }

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

@@ -108,7 +108,7 @@
   }
 
   .cobalt-TextField__Input[type][data-state="open"] {
-    @apply c-border-accent c-border-2;
+    @apply c-border-accent;
   }
 
   .cobalt-TextField__Icon {

package/styles/components/Form/CheckablePill.scss

@@ -3,7 +3,6 @@
 .cobalt-CheckablePillField {
   $self: &;
   $height: 40px;
-  $animation-duration: 100ms;
   $toggle-switch-focus-offset: math.div($height, 10);
 
   position: relative;
@@ -28,7 +27,7 @@
   }
 
   &__Label {
-    @apply c-border-base c-border-2 c-text-base c-bg-secondary c-py-none c-px-md;
+    @apply c-border-base c-border-2 c-text-base c-bg-secondary c-py-none c-px-md c-state-interactive c-transition;
     position: relative;
 
     display: flex;
@@ -41,10 +40,7 @@
 
     border-radius: math.div($height, 2);
 
-    transition: $animation-duration;
-
     &:hover {
-      @apply c-border-accent;
       box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
 
       transform: translateY(-1px);
@@ -71,7 +67,7 @@
   }
 
   &__Input:disabled + #{ $self }__Label {
-    @apply c-border-base c-border-2 c-bg-disabled;
+    @apply c-border-base c-border-2 c-bg-disabled c-state-none;
 
     cursor: default;
     box-shadow: none;
@@ -87,9 +83,7 @@
   &--with-icon {
     .cobalt-Icon {
       @include semantic-color(icon, base, fill);
-      @apply c-mr-xs;
-
-      transition: fill $animation-duration ease-in-out;
+      @apply c-mr-xs c-transition-colors;
     }
 
     #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {

package/styles/components/Form/Checkmark.scss

@@ -21,15 +21,17 @@
       opacity: 0;
 
       & + #{ $self }__Checkmark {
-        @apply c-border-accent c-border-2 c-mr-xs;
+        @apply c-border-accent c-border-2 c-mr-xs c-transition-colors;
         display: inline-block;
 
         flex: 0 0 auto;
 
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
         cursor: pointer;
+      }
 
-        transition: border-color 150ms ease-in-out;
+      &:not([disabled]) + #{ $self }__Checkmark {
+        @apply c-state-interactive;
       }
 
       &[disabled] ~ .cobalt-CheckmarkField__Label {
@@ -53,7 +55,7 @@
       }
 
       & + #{ $self }__Checkmark::after {
-        @apply c-border-accent c-bg-accentAlt c-rounded-full;
+        @apply c-border c-border-accent c-bg-accentAlt c-rounded-full;
 
         // Exception for radio inputs
         border-width: 5px;
@@ -75,13 +77,13 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        @apply c-border-subdued;
+        @apply c-border c-border-subdued;
 
         box-shadow: none;
       }
 
       &[disabled]:checked ~ #{ $self }__Checkmark::after {
-        @apply c-border-subdued c-bg-disabled;
+        @apply c-border c-border-subdued c-bg-disabled;
       }
     }
 
@@ -127,7 +129,7 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        @apply c-border-subdued;
+        @apply c-border c-border-subdued;
 
         box-shadow: none;
       }
@@ -151,15 +153,15 @@
 
     &--error {
       #{ $self }__Input + #{ $self }__Checkmark {
-        @apply c-border-error;
+        @apply c-border-2 c-border-error;
       }
 
       #{ $self }__Input[type="radio"]:checked + #{ $self }__Checkmark::after {
-        @apply c-border-error c-bg-errorInteractive;
+        @apply c-border c-border-error c-bg-error;
       }
 
       #{ $self }__Input[type="checkbox"]:checked + #{ $self }__Checkmark {
-        @apply c-bg-errorInteractive;
+        @apply c-bg-error;
       }
     }
   }

package/styles/components/Form/RadioWithDetails.scss

@@ -9,7 +9,7 @@
   --visual-radio-size: 18px;
 
   .cobalt-radio-with-details__inner {
-    @apply c-border-baseInteractive c-text-base c-bg-secondary;
+    @apply c-border c-border-base c-rounded-lg c-text-base c-bg-secondary c-state-interactive c-transition-colors;
     height: 100%;
     display: flex;
     flex-direction: row;
@@ -18,9 +18,6 @@
     padding: spacing(sm);
 
     cursor: pointer;
-    @apply c-rounded-lg;
-
-    transition: all 120ms ease-in-out;
 
     gap: spacing(xs);
   }
@@ -43,8 +40,6 @@
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
-
-    transition: color 150ms ease-in-out;
   }
 
   .cobalt-radio-with-details__description {
@@ -52,8 +47,6 @@
     font-family: font-family(base);
     font-size: 14px;
     line-height: 20px;
-
-    transition: color 150ms ease-in-out;
   }
 
   .cobalt-radio-with-details__input {
@@ -79,8 +72,6 @@
 
       @apply c-rounded-full;
       cursor: pointer;
-
-      transition: border-color 150ms ease-in-out;
     }
 
     &:focus-visible + #{ $self }__inner {
@@ -91,17 +82,13 @@
     }
 
     &:checked + #{ $self }__inner {
-      @apply c-border-accent c-text-accentAlt c-bg-accentAlt;
+      @apply c-border c-border-accent c-text-accentAlt c-bg-accentAlt c-state-interactive c-transition-interactive;
     }
 
     &:checked + #{ $self }__inner .cobalt-Icon {
       @include fill-color(accent);
     }
 
-    &:checked + #{ $self }__inner .cobalt-contained-icon {
-      @apply c-bg-accentAlt;
-    }
-
     &:checked + #{ $self }__inner #{ $self }__visual-input {
       @include semantic-color(icon, accentAlt, border-color);
     }
@@ -112,7 +99,7 @@
     }
 
     & + #{ $self }__inner #{ $self }__visual-input::after {
-      @apply c-border-accent c-bg-accentAlt;
+      @apply c-border c-border-accent c-bg-accentAlt;
       left: 2px;
       top: 2px;
 
@@ -137,6 +124,7 @@
     }
 
     &[disabled] + #{ $self }__inner {
+      @apply c-state-none;
       opacity: 0.7;
       cursor: not-allowed;
     }

package/styles/components/Form/Select.scss

@@ -11,17 +11,16 @@
     &__Input {
       @include form-input-base($self);
 
-      @apply c-pr-lg;
+      @apply c-pr-lg c-cursor-pointer;
 
       line-height: 20px;
 
+      background-color: theme("semanticStateColor.interactive.DEFAULT");
       background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2000000'><polygon points='0,0 100,0 50,50'/></svg>");
       background-size: 10px;
       background-position: calc(100% - 12px) 19px;
       background-repeat: no-repeat;
 
-      -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
-      -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
       appearance: none;
 
       // select placeholder
@@ -30,8 +29,21 @@
         opacity: 0.7;
       }
 
-      &[disabled] {
+      &:hover,
+      &:focus {
+        background-color: theme("semanticStateColor.interactive.hover");
+      }
+
+      &:active {
+        background-color: theme("semanticStateColor.interactive.press");
+      }
+
+      &[disabled],
+      &[disabled]:hover,
+      &[disabled]:focus,
+      &[disabled]:active {
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0,0,0,0.2)'><polygon points='0,0 100,0 50,50'/></svg>");
+        background-color: theme("semanticStateColor.interactive.DEFAULT");
       }
     }
   }