@unoff/ui 1.21.2 → 1.22.0

package/dist/components/inputs/dropzone/Dropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.js","sources":["../../../../src/components/inputs/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport SemanticMessage from '@components/dialogs/semantic-message/SemanticMessage'\nimport Icon from '@components/assets/icon/Icon'\nimport Button from '@components/actions/button/Button'\nimport './dropzone.scss'\n\ninterface FileContent {\n  name: string\n  content: string | ArrayBuffer | null | undefined\n}\n\nexport interface DropzoneProps {\n  /**\n   * Message to display in the dropzone\n   */\n  message: string\n  /**\n   * Warning message to show on invalid file type\n   */\n  warningMessage: string\n  /**\n   * Error message to show on upload failure\n   */\n  errorMessage: string\n  /**\n   * Call-to-action text for the upload button\n   */\n  cta: string\n  /**\n   * Array of accepted MIME types\n   * @default ['image/jpeg', 'image/png', 'application/pdf']\n   */\n  acceptedMimeTypes: Array<string>\n  /**\n   * Whether multiple files can be uploaded\n   */\n  isMultiple: boolean\n  /**\n   * Whether the dropzone is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether the dropzone is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether the dropzone is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Callback when files are successfully imported\n   */\n  onImportFiles: (files: Array<FileContent>) => void\n}\n\nexport interface DropzoneState {\n  status: 'READY' | 'WAITING' | 'WARNING' | 'ERROR'\n  isLoading: boolean\n  isDraggedOver: boolean\n  blackList: Array<string>\n}\n\nexport default class Dropzone extends React.Component<DropzoneProps, DropzoneState> {\n  stopLoading: NodeJS.Timeout | undefined\n\n  static defaultProps: Partial<DropzoneProps> = {\n    acceptedMimeTypes: ['image/jpeg', 'image/png', 'application/pdf'],\n    isLoading: false,\n    isDisabled: false,\n    isNew: false,\n    isBlocked: false,\n  }\n\n  constructor(props: DropzoneProps) {\n    super(props)\n    this.state = {\n      status: 'READY',\n      isLoading: props.isLoading || false,\n      isDraggedOver: false,\n      blackList: [],\n    }\n    this.stopLoading = undefined\n  }\n\n  // Lifecycle\n  componentDidUpdate = (prevProps: Readonly<DropzoneProps>) => {\n    const { isLoading } = this.props\n\n    if (isLoading !== prevProps.isLoading && isLoading) {\n      this.setState({\n        isLoading: true,\n      })\n      this.stopLoading = setTimeout(\n        () => {\n          this.setState({\n            isLoading: false,\n          })\n        },\n        2 * 60 * 1000\n      )\n    } else if (isLoading !== prevProps.isLoading && !isLoading) {\n      clearTimeout(this.stopLoading)\n      this.setState({\n        isLoading: false,\n      })\n    }\n  }\n\n  // Direct Actions\n  onImport = (validFiles: Array<File>, unValidFiles: Array<File>) => {\n    const { onImportFiles } = this.props\n    const fileContents: Array<FileContent> = []\n\n    validFiles.forEach((file: File) => {\n      const reader = new FileReader()\n\n      reader.onload = (e) => {\n        const content = e.target?.result\n\n        fileContents.push({ name: file.name, content: content })\n\n        if (\n          fileContents.length === validFiles.length &&\n          unValidFiles.length === 0\n        ) {\n          onImportFiles(fileContents)\n          this.setState({\n            status: 'READY',\n          })\n        } else if (\n          fileContents.length === validFiles.length &&\n          unValidFiles.length > 0\n        ) {\n          onImportFiles(fileContents)\n          this.setState({\n            status: 'WARNING',\n          })\n        }\n      }\n\n      if (file.type.startsWith('image/png')) reader.readAsArrayBuffer(file)\n      else if (file.type === 'application/pdf') reader.readAsArrayBuffer(file)\n      else reader.readAsText(file)\n    })\n  }\n\n  onValidFilesViaButton = () => {\n    const { acceptedMimeTypes, isMultiple } = this.props\n\n    this.setState({\n      isDraggedOver: false,\n    })\n\n    const fileInput = document.createElement('input')\n    fileInput.type = 'file'\n    fileInput.accept = acceptedMimeTypes.join(',')\n    fileInput.multiple = isMultiple\n    fileInput.onchange = (event: Event) => {\n      this.setState({\n        status: 'WAITING',\n        isLoading: true,\n      })\n      const target = event.target as HTMLInputElement\n      const files = target.files\n      this.onImport(Array.from(files || []), [])\n    }\n    fileInput.click()\n    fileInput.remove()\n  }\n\n  onValidFilesViaDrop = (event: React.DragEvent) => {\n    const { acceptedMimeTypes, isMultiple } = this.props\n\n    event.preventDefault()\n    this.setState({\n      status: 'WAITING',\n      isLoading: true,\n      isDraggedOver: false,\n    })\n\n    let validFiles: File[] = Array.from(event.dataTransfer.files).filter(\n      (file: File) => acceptedMimeTypes.includes(file.type)\n    )\n\n    let unValidFiles: File[] = Array.from(event.dataTransfer.files).filter(\n      (file: File) => !acceptedMimeTypes.includes(file.type)\n    )\n\n    if (!isMultiple && validFiles.length > 1) {\n      unValidFiles = unValidFiles.concat(validFiles.slice(1))\n      validFiles = validFiles.slice(0, 1)\n    }\n\n    this.setState({\n      blackList: unValidFiles.map((file) => file.name),\n    })\n\n    if (validFiles.length > 0) this.onImport(validFiles, unValidFiles)\n    else\n      this.setState({\n        status: 'ERROR',\n        isLoading: false,\n      })\n  }\n\n  onDragOver = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: true,\n    })\n  }\n\n  onDragEnter = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: true,\n    })\n  }\n\n  onDragLeave = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: false,\n    })\n  }\n\n  render() {\n    const {\n      message,\n      warningMessage,\n      errorMessage,\n      cta,\n      isDisabled,\n      isBlocked,\n      isNew,\n    } = this.props\n    const { status, isLoading, isDraggedOver, blackList } = this.state\n    let fragment\n\n    switch (status) {\n      case 'READY': {\n        fragment = (\n          <SemanticMessage\n            type=\"NEUTRAL\"\n            message={message}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n      case 'WAITING': {\n        fragment = null\n        break\n      }\n      case 'WARNING': {\n        fragment = (\n          <SemanticMessage\n            type=\"WARNING\"\n            message={warningMessage.replace(\n              '$1',\n              blackList.map((item) => `\"${item}\"`).join(', ')\n            )}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n      case 'ERROR': {\n        fragment = (\n          <SemanticMessage\n            type=\"ERROR\"\n            message={errorMessage}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n    }\n\n    return (\n      <div\n        className={doClassnames([\n          'dropzone',\n          isDraggedOver && 'dropzone--dragged-over',\n          (isBlocked || isDisabled) && 'dropzone--disabled',\n        ])}\n        role=\"region\"\n        aria-disabled={isDisabled || isBlocked}\n        onDragOver={this.onDragOver}\n        onDragEnter={this.onDragEnter}\n        onDragLeave={this.onDragLeave}\n        onDrop={this.onValidFilesViaDrop}\n      >\n        {isLoading && (\n          <Icon\n            type=\"PICTO\"\n            iconName=\"spinner\"\n          />\n        )}\n        {fragment}\n      </div>\n    )\n  }\n}\n"],"names":["Dropzone","React","props","prevProps","isLoading","validFiles","unValidFiles","onImportFiles","fileContents","file","reader","e","content","acceptedMimeTypes","isMultiple","fileInput","event","files","message","warningMessage","errorMessage","cta","isDisabled","isBlocked","isNew","status","isDraggedOver","blackList","fragment","jsx","SemanticMessage","Button","item","jsxs","doClassnames","Icon"],"mappings":"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"}
+{"version":3,"file":"Dropzone.js","sources":["../../../../src/components/inputs/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport SemanticMessage from '@components/dialogs/semantic-message/SemanticMessage'\nimport Icon from '@components/assets/icon/Icon'\nimport Button from '@components/actions/button/Button'\nimport './dropzone.scss'\n\ninterface FileContent {\n  name: string\n  content: string | ArrayBuffer | null | undefined\n}\n\nexport interface DropzoneProps {\n  /**\n   * Message to display in the dropzone\n   */\n  message: string\n  /**\n   * Warning message to show on invalid file type\n   */\n  warningMessage: string\n  /**\n   * Error message to show on upload failure\n   */\n  errorMessage: string\n  /**\n   * Call-to-action text for the upload button\n   */\n  cta: string\n  /**\n   * Array of accepted MIME types\n   * @default ['image/jpeg', 'image/png', 'application/pdf']\n   */\n  acceptedMimeTypes: Array<string>\n  /**\n   * Whether multiple files can be uploaded\n   */\n  isMultiple: boolean\n  /**\n   * Whether the dropzone is in loading state\n   * @default false\n   */\n  isLoading?: boolean\n  /**\n   * Whether the dropzone is disabled\n   * @default false\n   */\n  isDisabled?: boolean\n  /**\n   * Whether the dropzone is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Whether to show a \"New\" badge\n   * @default false\n   */\n  isNew?: boolean\n  /**\n   * Callback when files are successfully imported\n   */\n  onImportFiles: (files: Array<FileContent>) => void\n}\n\nexport interface DropzoneState {\n  status: 'READY' | 'WAITING' | 'WARNING' | 'ERROR'\n  isLoading: boolean\n  isDraggedOver: boolean\n  blackList: Array<string>\n}\n\nexport default class Dropzone extends React.Component<\n  DropzoneProps,\n  DropzoneState\n> {\n  stopLoading: number | undefined\n\n  static defaultProps: Partial<DropzoneProps> = {\n    acceptedMimeTypes: ['image/jpeg', 'image/png', 'application/pdf'],\n    isLoading: false,\n    isDisabled: false,\n    isNew: false,\n    isBlocked: false,\n  }\n\n  constructor(props: DropzoneProps) {\n    super(props)\n    this.state = {\n      status: 'READY',\n      isLoading: props.isLoading || false,\n      isDraggedOver: false,\n      blackList: [],\n    }\n    this.stopLoading = undefined\n  }\n\n  // Lifecycle\n  componentDidUpdate = (prevProps: Readonly<DropzoneProps>) => {\n    const { isLoading } = this.props\n\n    if (isLoading !== prevProps.isLoading && isLoading) {\n      this.setState({\n        isLoading: true,\n      })\n      this.stopLoading = setTimeout(\n        () => {\n          this.setState({\n            isLoading: false,\n          })\n        },\n        2 * 60 * 1000\n      )\n    } else if (isLoading !== prevProps.isLoading && !isLoading) {\n      clearTimeout(this.stopLoading)\n      this.setState({\n        isLoading: false,\n      })\n    }\n  }\n\n  // Direct Actions\n  onImport = (validFiles: Array<File>, unValidFiles: Array<File>) => {\n    const { onImportFiles } = this.props\n    const fileContents: Array<FileContent> = []\n\n    validFiles.forEach((file: File) => {\n      const reader = new FileReader()\n\n      reader.onload = (e) => {\n        const content = e.target?.result\n\n        fileContents.push({ name: file.name, content: content })\n\n        if (\n          fileContents.length === validFiles.length &&\n          unValidFiles.length === 0\n        ) {\n          onImportFiles(fileContents)\n          this.setState({\n            status: 'READY',\n          })\n        } else if (\n          fileContents.length === validFiles.length &&\n          unValidFiles.length > 0\n        ) {\n          onImportFiles(fileContents)\n          this.setState({\n            status: 'WARNING',\n          })\n        }\n      }\n\n      if (file.type.startsWith('image/png')) reader.readAsArrayBuffer(file)\n      else if (file.type === 'application/pdf') reader.readAsArrayBuffer(file)\n      else reader.readAsText(file)\n    })\n  }\n\n  onValidFilesViaButton = () => {\n    const { acceptedMimeTypes, isMultiple } = this.props\n\n    this.setState({\n      isDraggedOver: false,\n    })\n\n    const fileInput = document.createElement('input')\n    fileInput.type = 'file'\n    fileInput.accept = acceptedMimeTypes.join(',')\n    fileInput.multiple = isMultiple\n    fileInput.onchange = (event: Event) => {\n      this.setState({\n        status: 'WAITING',\n        isLoading: true,\n      })\n      const target = event.target as HTMLInputElement\n      const files = target.files\n      this.onImport(Array.from(files || []), [])\n    }\n    fileInput.click()\n    fileInput.remove()\n  }\n\n  onValidFilesViaDrop = (event: React.DragEvent) => {\n    const { acceptedMimeTypes, isMultiple } = this.props\n\n    event.preventDefault()\n    this.setState({\n      status: 'WAITING',\n      isLoading: true,\n      isDraggedOver: false,\n    })\n\n    let validFiles: File[] = Array.from(event.dataTransfer.files).filter(\n      (file: File) => acceptedMimeTypes.includes(file.type)\n    )\n\n    let unValidFiles: File[] = Array.from(event.dataTransfer.files).filter(\n      (file: File) => !acceptedMimeTypes.includes(file.type)\n    )\n\n    if (!isMultiple && validFiles.length > 1) {\n      unValidFiles = unValidFiles.concat(validFiles.slice(1))\n      validFiles = validFiles.slice(0, 1)\n    }\n\n    this.setState({\n      blackList: unValidFiles.map((file) => file.name),\n    })\n\n    if (validFiles.length > 0) this.onImport(validFiles, unValidFiles)\n    else\n      this.setState({\n        status: 'ERROR',\n        isLoading: false,\n      })\n  }\n\n  onDragOver = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: true,\n    })\n  }\n\n  onDragEnter = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: true,\n    })\n  }\n\n  onDragLeave = (event: React.DragEvent) => {\n    event.preventDefault()\n    this.setState({\n      isDraggedOver: false,\n    })\n  }\n\n  render() {\n    const {\n      message,\n      warningMessage,\n      errorMessage,\n      cta,\n      isDisabled,\n      isBlocked,\n      isNew,\n    } = this.props\n    const { status, isLoading, isDraggedOver, blackList } = this.state\n    let fragment\n\n    switch (status) {\n      case 'READY': {\n        fragment = (\n          <SemanticMessage\n            type=\"NEUTRAL\"\n            message={message}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n      case 'WAITING': {\n        fragment = null\n        break\n      }\n      case 'WARNING': {\n        fragment = (\n          <SemanticMessage\n            type=\"WARNING\"\n            message={warningMessage.replace(\n              '$1',\n              blackList.map((item) => `\"${item}\"`).join(', ')\n            )}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n      case 'ERROR': {\n        fragment = (\n          <SemanticMessage\n            type=\"ERROR\"\n            message={errorMessage}\n            orientation=\"VERTICAL\"\n            actionsSlot={\n              <Button\n                type=\"primary\"\n                label={cta}\n                isBlocked={isBlocked}\n                isDisabled={isDisabled}\n                isNew={isNew}\n                action={() =>\n                  !(isBlocked || isDisabled) && this.onValidFilesViaButton()\n                }\n              />\n            }\n          />\n        )\n        break\n      }\n    }\n\n    return (\n      <div\n        className={doClassnames([\n          'dropzone',\n          isDraggedOver && 'dropzone--dragged-over',\n          (isBlocked || isDisabled) && 'dropzone--disabled',\n        ])}\n        role=\"region\"\n        aria-disabled={isDisabled || isBlocked}\n        onDragOver={this.onDragOver}\n        onDragEnter={this.onDragEnter}\n        onDragLeave={this.onDragLeave}\n        onDrop={this.onValidFilesViaDrop}\n      >\n        {isLoading && (\n          <Icon\n            type=\"PICTO\"\n            iconName=\"spinner\"\n          />\n        )}\n        {fragment}\n      </div>\n    )\n  }\n}\n"],"names":["Dropzone","React","props","prevProps","isLoading","validFiles","unValidFiles","onImportFiles","fileContents","file","reader","e","content","acceptedMimeTypes","isMultiple","fileInput","event","files","message","warningMessage","errorMessage","cta","isDisabled","isBlocked","isNew","status","isDraggedOver","blackList","fragment","jsx","SemanticMessage","Button","item","jsxs","doClassnames","Icon"],"mappings":"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"}

package/dist/components/inputs/input/Input.figma.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { i as e } from "../../../index_react-BkjUklDQ.js";
+import { i as e } from "../../../index_react-D2vn0nVd.js";
 import t from "./Input.js";
 e.figma.connect(
   t,

package/dist/components/lists/actions-list/ActionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIhD,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAC1F,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAI7C;gBAEW,KAAK,EAAE,gBAAgB;IAcnC,kBAAkB,CAChB,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,EACrC,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IA8BvC,kBAAkB,aAYjB;IAED,qBAAqB,aAYpB;IAED,QAAQ,GAAI,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAU7C;IAED,cAAc,GAAI,WAAW,IAAI,GAAG,MAAM,UAiBzC;IAED,aAAa,aAKZ;IAGD,OAAO,GAAI,SAAS,KAAK,CAAC,cAAc,CAAC,GAAG,SAAS,6CAgDpD;IAED,SAAS,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CAmBjD;IAED,aAAa,GAAI,OAAO,MAAM,6CAS7B;IAED,UAAU,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CA6DlD;IAED,SAAS,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CAqDjD;IAED,aAAa,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CA8DrD;IAED,MAAM;CA8FP"}
+{"version":3,"file":"ActionsList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIhD,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,wBAAwB;QACxB,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;QAC9B,uBAAuB;QACvB,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;KACvB,CAAA;IACD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAC/C;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CACtD,gBAAgB,EAChB,gBAAgB,CACjB;IACC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,mBAAmB,CAAiC;IAE5D,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAI7C;gBAEW,KAAK,EAAE,gBAAgB;IAcnC,kBAAkB,CAChB,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,EACrC,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IA8BvC,kBAAkB,aAYjB;IAED,qBAAqB,aAYpB;IAED,QAAQ,GAAI,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAU7C;IAED,cAAc,GAAI,WAAW,IAAI,GAAG,MAAM,UAiBzC;IAED,aAAa,aAKZ;IAGD,OAAO,GAAI,SAAS,KAAK,CAAC,cAAc,CAAC,GAAG,SAAS,6CAgDpD;IAED,SAAS,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CAmBjD;IAED,aAAa,GAAI,OAAO,MAAM,6CAS7B;IAED,UAAU,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CA6DlD;IAED,SAAS,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CAqDjD;IAED,aAAa,GAAI,QAAQ,cAAc,EAAE,OAAO,MAAM,6CA8DrD;IAED,MAAM;CA8FP"}

package/dist/components/lists/actions-list/ActionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsList.js","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport { DropdownOption } from '@tps/list.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon.tsx'\nimport './actions-list.scss'\n\nexport interface ActionsListProps {\n  /**\n   * List of options to display\n   */\n  options: Array<DropdownOption>\n  /**\n   * ID of the currently selected option\n   */\n  selected?: string\n  /**\n   * Direction for submenu expansion\n   * @default 'RIGHT'\n   */\n  direction?: 'LEFT' | 'RIGHT'\n  /**\n   * Whether the list should be scrollable\n   * @default false\n   */\n  shouldScroll?: boolean\n  /**\n   * ID of the container element\n   */\n  containerId?: string\n  /**\n   * Preview tooltip configuration\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Callback when the list is cancelled\n   * @default () => null\n   */\n  onCancellation?: () => void\n  /**\n   * Ref to the menu element\n   */\n  menuRef?: React.RefObject<HTMLUListElement>\n  /**\n   * Ref to the submenu element\n   */\n  subMenuRef?: React.RefObject<HTMLUListElement>\n}\n\nexport interface ActionsListState {\n  openedGroup: string\n  listScrollOffset: number\n  listScrollAmount: number\n  listClientHeight?: number\n  shift: number\n  isVisible: boolean\n}\n\nexport default class ActionsList extends React.Component<ActionsListProps, ActionsListState> {\n  private scrollInterval: number | null\n  private subMenuContainerRef: React.RefObject<HTMLDivElement>\n\n  static defaultProps: Partial<ActionsListProps> = {\n    direction: 'RIGHT',\n    shouldScroll: false,\n    onCancellation: () => null,\n  }\n\n  constructor(props: ActionsListProps) {\n    super(props)\n    this.state = {\n      openedGroup: 'EMPTY',\n      listScrollOffset: 0,\n      listScrollAmount: 1,\n      listClientHeight: 1,\n      shift: 0,\n      isVisible: true,\n    }\n    this.scrollInterval = null\n    this.subMenuContainerRef = React.createRef<HTMLDivElement>()\n  }\n\n  componentDidUpdate(\n    prevProps: Readonly<ActionsListProps>,\n    prevState: Readonly<ActionsListState>\n  ) {\n    const { shouldScroll } = this.props\n    const { openedGroup } = this.state\n    const list = document.getElementsByClassName(\n      'select-menu__menu'\n    )[0] as HTMLElement\n\n    if (prevProps.shouldScroll !== shouldScroll)\n      this.setState({\n        listScrollOffset: list.scrollTop,\n        listScrollAmount: list.scrollHeight - list.clientHeight,\n        listClientHeight: list.clientHeight,\n      })\n\n    if (prevState.openedGroup !== openedGroup) {\n      const subMenuElement = this.subMenuContainerRef.current\n      if (subMenuElement) {\n        const rect = subMenuElement.getBoundingClientRect()\n        if (rect.x < 0) this.setState({ shift: -rect.x + 8 })\n        if (rect.x + rect.width > window.innerWidth)\n          this.setState({\n            shift: window.innerWidth - rect.x - rect.width - 8,\n          })\n        this.setState({ isVisible: true })\n      }\n    }\n  }\n\n  // Direct Actions\n  focusFirstMenuItem = () => {\n    const { menuRef } = this.props\n\n    setTimeout(() => {\n      const menuElement = menuRef?.current\n      if (menuElement) {\n        const firstItem = menuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  focusFirstSubMenuItem = () => {\n    const { subMenuRef } = this.props\n\n    setTimeout(() => {\n      const subMenuElement = subMenuRef?.current\n      if (subMenuElement) {\n        const firstItem = subMenuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const target = e.target as HTMLElement\n    this.setState({\n      listScrollOffset: target.scrollTop,\n      listScrollAmount: target.scrollHeight - target.clientHeight,\n    })\n\n    if (target.scrollTop === 0) this.stopScrolling()\n    if (target.scrollTop === target.scrollHeight - target.clientHeight)\n      this.stopScrolling()\n  }\n\n  startScrolling = (direction: 'UP' | 'DOWN') => {\n    const list = document.getElementsByClassName('select-menu__menu')[0]\n\n    const scroll = () => {\n      if (list) {\n        if (direction === 'UP' && list.scrollTop > 0) list.scrollTop -= 4\n        else if (\n          direction === 'DOWN' &&\n          list.scrollTop < list.scrollHeight - list.clientHeight\n        )\n          list.scrollTop += 4\n\n        this.scrollInterval = requestAnimationFrame(scroll)\n      }\n    }\n\n    this.scrollInterval = requestAnimationFrame(scroll)\n  }\n\n  stopScrolling = () => {\n    if (this.scrollInterval) {\n      cancelAnimationFrame(this.scrollInterval)\n      this.scrollInterval = null\n    }\n  }\n\n  // Template\n  SubMenu = (options: Array<DropdownOption> | undefined) => {\n    const { subMenuRef } = this.props\n    const { shift, isVisible } = this.state\n\n    return (\n      <div\n        className=\"select-menu__submenu\"\n        role=\"menu\"\n        style={{\n          visibility: isVisible ? 'visible' : 'hidden',\n        }}\n        aria-hidden={!isVisible}\n        ref={this.subMenuContainerRef}\n      >\n        <ul\n          className=\"select-menu__menu select-menu__menu--active\"\n          ref={subMenuRef}\n          role=\"menu\"\n          style={{\n            transform: `translateX(${shift}px)`,\n          }}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            const activeChildren = children.filter(\n              (child) => child.isActive !== false\n            )\n\n            if (isActive && activeChildren.length > 0)\n              return this.MenuGroup(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            else if (isActive && activeChildren.length === 0)\n              return this.MenuSubOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n          })}\n        </ul>\n      </div>\n    )\n  }\n\n  MenuTitle = (option: DropdownOption, index: number) => {\n    return (\n      <li\n        key={`menu-option-${index}`}\n        data-role={'TITLE'}\n        className={doClassnames([\n          'select-menu__item',\n          'select-menu__item--disabled',\n        ])}\n        aria-disabled=\"true\"\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n          aria-hidden=\"true\"\n        >\n          {option.label}\n        </span>\n      </li>\n    )\n  }\n\n  MenuSeparator = (index: number) => {\n    return (\n      <li\n        key={`menu-separator-${index}`}\n        data-role={'SEPARATOR'}\n      >\n        <hr />\n      </li>\n    )\n  }\n\n  MenuOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-option-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseDown={(e) => {\n          !option.isBlocked ? option.action?.(e) : undefined\n          onCancellation?.()\n        }}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  MenuGroup = (option: DropdownOption, index: number) => {\n    const { preview, onCancellation } = this.props\n    const { openedGroup } = this.state\n\n    return (\n      <li\n        key={`menu-group-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          option.isBlocked && ' select-menu__item--blocked',\n        ])}\n        style={{\n          zIndex: openedGroup === option.value ? 2 : 'auto',\n        }}\n        data-is-blocked={option.isBlocked}\n        data-role={'GROUP'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-disabled={option.isBlocked}\n        aria-haspopup=\"true\"\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked)\n            return this.setState({ openedGroup: option.value ?? 'EMPTY' }, () =>\n              this.focusFirstSubMenuItem()\n            )\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseEnter={() =>\n          this.setState({ openedGroup: option.value ?? 'EMPTY' })\n        }\n        onMouseLeave={() => this.setState({ openedGroup: 'EMPTY' })}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n        <span className=\"select-menu__item__caret\">\n          <Icon\n            type=\"PICTO\"\n            iconName=\"caret-right\"\n          />\n        </span>\n        {openedGroup === option.value && this.SubMenu(option.children)}\n      </li>\n    )\n  }\n\n  MenuSubOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-suboption-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape')\n            this.setState({ openedGroup: 'EMPTY' }, () =>\n              this.focusFirstMenuItem()\n            )\n\n          return null\n        }}\n        onMouseDown={!option.isBlocked ? option.action : undefined}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n        <span\n          className={doClassnames([\n            texts['type--small'],\n            texts.type,\n            'select-menu__item__label',\n          ])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  render() {\n    const { options, direction, shouldScroll, menuRef } = this.props\n    const { listScrollOffset, listScrollAmount } = this.state\n\n    return (\n      <div\n        className=\"select-menu\"\n        style={{\n          height: shouldScroll ? '100%' : 'auto',\n        }}\n      >\n        {shouldScroll && listScrollOffset !== 0 && listScrollAmount !== 0 && (\n          <div\n            className=\"select-menu__spot select-menu__spot--top\"\n            onMouseEnter={() => this.startScrolling('UP')}\n            onMouseLeave={this.stopScrolling}\n          >\n            <Icon\n              type=\"PICTO\"\n              iconName=\"chevron-up\"\n            />\n          </div>\n        )}\n        <ul\n          className={doClassnames([\n            'select-menu__menu',\n            'select-menu__menu--active',\n            direction === 'RIGHT'\n              ? 'select-menu__menu--right'\n              : 'select-menu__menu--left',\n            shouldScroll && 'select-menu__menu--scrolling',\n          ])}\n          onScroll={this.onScroll}\n          ref={menuRef}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            if (isActive && option.type === 'SEPARATOR')\n              return this.MenuSeparator(index)\n            if (isActive && option.type === 'TITLE')\n              return this.MenuTitle(option, index)\n            if (isActive && option.type === 'OPTION')\n              return this.MenuOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            if (isActive && option.type === 'GROUP' && children) {\n              const activeChildren = children.filter(\n                (child) => child.isActive !== false\n              )\n\n              if (activeChildren.length > 1)\n                return this.MenuGroup(\n                  { ...option, isActive, isBlocked, isNew, children },\n                  index\n                )\n              else if (activeChildren.length === 1)\n                return this.MenuOption(\n                  {\n                    ...activeChildren[0],\n                    isActive: activeChildren[0].isActive,\n                    isBlocked: activeChildren[0].isBlocked,\n                    isNew: activeChildren[0].isNew,\n                  },\n                  index\n                )\n              else return null\n            }\n            return null\n          })}\n        </ul>\n        {shouldScroll &&\n          listScrollAmount !== listScrollOffset &&\n          listScrollAmount !== 0 && (\n            <div\n              className=\"select-menu__spot select-menu__spot--bottom\"\n              onMouseEnter={() => this.startScrolling('DOWN')}\n              onMouseLeave={this.stopScrolling}\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </div>\n          )}\n      </div>\n    )\n  }\n}\n"],"names":["ActionsList","React","props","prevProps","prevState","shouldScroll","openedGroup","list","subMenuElement","rect","menuRef","menuElement","firstItem","subMenuRef","target","direction","scroll","options","shift","isVisible","jsx","option","index","isActive","isBlocked","isNew","children","activeChildren","child","doClassnames","texts","selected","preview","onCancellation","jsxs","value","e","Icon","Chip","listScrollOffset","listScrollAmount"],"mappings":"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"}
+{"version":3,"file":"ActionsList.js","sources":["../../../../src/components/lists/actions-list/ActionsList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport { DropdownOption } from '@tps/list.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon.tsx'\nimport './actions-list.scss'\n\nexport interface ActionsListProps {\n  /**\n   * List of options to display\n   */\n  options: Array<DropdownOption>\n  /**\n   * ID of the currently selected option\n   */\n  selected?: string\n  /**\n   * Direction for submenu expansion\n   * @default 'RIGHT'\n   */\n  direction?: 'LEFT' | 'RIGHT'\n  /**\n   * Whether the list should be scrollable\n   * @default false\n   */\n  shouldScroll?: boolean\n  /**\n   * ID of the container element\n   */\n  containerId?: string\n  /**\n   * Preview tooltip configuration\n   */\n  preview?: {\n    /** Preview image URL */\n    image: string\n    /** Preview text */\n    text: string | React.ReactNode\n    /** Preview position */\n    pin?: 'TOP' | 'BOTTOM'\n  }\n  /**\n   * Callback when the list is cancelled\n   * @default () => null\n   */\n  onCancellation?: () => void\n  /**\n   * Ref to the menu element\n   */\n  menuRef?: React.RefObject<HTMLUListElement>\n  /**\n   * Ref to the submenu element\n   */\n  subMenuRef?: React.RefObject<HTMLUListElement>\n}\n\nexport interface ActionsListState {\n  openedGroup: string\n  listScrollOffset: number\n  listScrollAmount: number\n  listClientHeight?: number\n  shift: number\n  isVisible: boolean\n}\n\nexport default class ActionsList extends React.Component<\n  ActionsListProps,\n  ActionsListState\n> {\n  private scrollInterval: number | null\n  private subMenuContainerRef: React.RefObject<HTMLDivElement>\n\n  static defaultProps: Partial<ActionsListProps> = {\n    direction: 'RIGHT',\n    shouldScroll: false,\n    onCancellation: () => null,\n  }\n\n  constructor(props: ActionsListProps) {\n    super(props)\n    this.state = {\n      openedGroup: 'EMPTY',\n      listScrollOffset: 0,\n      listScrollAmount: 1,\n      listClientHeight: 1,\n      shift: 0,\n      isVisible: true,\n    }\n    this.scrollInterval = null\n    this.subMenuContainerRef = React.createRef<HTMLDivElement>()\n  }\n\n  componentDidUpdate(\n    prevProps: Readonly<ActionsListProps>,\n    prevState: Readonly<ActionsListState>\n  ) {\n    const { shouldScroll } = this.props\n    const { openedGroup } = this.state\n    const list = document.getElementsByClassName(\n      'select-menu__menu'\n    )[0] as HTMLElement\n\n    if (prevProps.shouldScroll !== shouldScroll)\n      this.setState({\n        listScrollOffset: list.scrollTop,\n        listScrollAmount: list.scrollHeight - list.clientHeight,\n        listClientHeight: list.clientHeight,\n      })\n\n    if (prevState.openedGroup !== openedGroup) {\n      const subMenuElement = this.subMenuContainerRef.current\n      if (subMenuElement) {\n        const rect = subMenuElement.getBoundingClientRect()\n        if (rect.x < 0) this.setState({ shift: -rect.x + 8 })\n        if (rect.x + rect.width > window.innerWidth)\n          this.setState({\n            shift: window.innerWidth - rect.x - rect.width - 8,\n          })\n        this.setState({ isVisible: true })\n      }\n    }\n  }\n\n  // Direct Actions\n  focusFirstMenuItem = () => {\n    const { menuRef } = this.props\n\n    setTimeout(() => {\n      const menuElement = menuRef?.current\n      if (menuElement) {\n        const firstItem = menuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  focusFirstSubMenuItem = () => {\n    const { subMenuRef } = this.props\n\n    setTimeout(() => {\n      const subMenuElement = subMenuRef?.current\n      if (subMenuElement) {\n        const firstItem = subMenuElement.querySelector(\n          'li[tabindex=\"0\"]:not([data-is-blocked=\"true\"])'\n        ) as HTMLElement\n        if (firstItem) firstItem.focus()\n      }\n    }, 0)\n  }\n\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const target = e.target as HTMLElement\n    this.setState({\n      listScrollOffset: target.scrollTop,\n      listScrollAmount: target.scrollHeight - target.clientHeight,\n    })\n\n    if (target.scrollTop === 0) this.stopScrolling()\n    if (target.scrollTop === target.scrollHeight - target.clientHeight)\n      this.stopScrolling()\n  }\n\n  startScrolling = (direction: 'UP' | 'DOWN') => {\n    const list = document.getElementsByClassName('select-menu__menu')[0]\n\n    const scroll = () => {\n      if (list) {\n        if (direction === 'UP' && list.scrollTop > 0) list.scrollTop -= 4\n        else if (\n          direction === 'DOWN' &&\n          list.scrollTop < list.scrollHeight - list.clientHeight\n        )\n          list.scrollTop += 4\n\n        this.scrollInterval = requestAnimationFrame(scroll)\n      }\n    }\n\n    this.scrollInterval = requestAnimationFrame(scroll)\n  }\n\n  stopScrolling = () => {\n    if (this.scrollInterval) {\n      cancelAnimationFrame(this.scrollInterval)\n      this.scrollInterval = null\n    }\n  }\n\n  // Template\n  SubMenu = (options: Array<DropdownOption> | undefined) => {\n    const { subMenuRef } = this.props\n    const { shift, isVisible } = this.state\n\n    return (\n      <div\n        className=\"select-menu__submenu\"\n        role=\"menu\"\n        style={{\n          visibility: isVisible ? 'visible' : 'hidden',\n        }}\n        aria-hidden={!isVisible}\n        ref={this.subMenuContainerRef}\n      >\n        <ul\n          className=\"select-menu__menu select-menu__menu--active\"\n          ref={subMenuRef}\n          role=\"menu\"\n          style={{\n            transform: `translateX(${shift}px)`,\n          }}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            const activeChildren = children.filter(\n              (child) => child.isActive !== false\n            )\n\n            if (isActive && activeChildren.length > 0)\n              return this.MenuGroup(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            else if (isActive && activeChildren.length === 0)\n              return this.MenuSubOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n          })}\n        </ul>\n      </div>\n    )\n  }\n\n  MenuTitle = (option: DropdownOption, index: number) => {\n    return (\n      <li\n        key={`menu-option-${index}`}\n        data-role={'TITLE'}\n        className={doClassnames([\n          'select-menu__item',\n          'select-menu__item--disabled',\n        ])}\n        aria-disabled=\"true\"\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n          aria-hidden=\"true\"\n        >\n          {option.label}\n        </span>\n      </li>\n    )\n  }\n\n  MenuSeparator = (index: number) => {\n    return (\n      <li\n        key={`menu-separator-${index}`}\n        data-role={'SEPARATOR'}\n      >\n        <hr />\n      </li>\n    )\n  }\n\n  MenuOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-option-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseDown={(e) => {\n          !option.isBlocked ? option.action?.(e) : undefined\n          onCancellation?.()\n        }}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  MenuGroup = (option: DropdownOption, index: number) => {\n    const { preview, onCancellation } = this.props\n    const { openedGroup } = this.state\n\n    return (\n      <li\n        key={`menu-group-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          option.isBlocked && ' select-menu__item--blocked',\n        ])}\n        style={{\n          zIndex: openedGroup === option.value ? 2 : 'auto',\n        }}\n        data-is-blocked={option.isBlocked}\n        data-role={'GROUP'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-disabled={option.isBlocked}\n        aria-haspopup=\"true\"\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked)\n            return this.setState({ openedGroup: option.value ?? 'EMPTY' }, () =>\n              this.focusFirstSubMenuItem()\n            )\n          if (e.key === 'Escape') onCancellation?.()\n\n          return null\n        }}\n        onMouseEnter={() =>\n          this.setState({ openedGroup: option.value ?? 'EMPTY' })\n        }\n        onMouseLeave={() => this.setState({ openedGroup: 'EMPTY' })}\n        onFocus={() => null}\n        onBlur={() => null}\n      >\n        <span\n          className={doClassnames([texts.type, 'select-menu__item__label'])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n        <span className=\"select-menu__item__caret\">\n          <Icon\n            type=\"PICTO\"\n            iconName=\"caret-right\"\n          />\n        </span>\n        {openedGroup === option.value && this.SubMenu(option.children)}\n      </li>\n    )\n  }\n\n  MenuSubOption = (option: DropdownOption, index: number) => {\n    const { selected, preview, onCancellation } = this.props\n\n    return (\n      <li\n        key={`menu-suboption-${index}`}\n        className={doClassnames([\n          'select-menu__item',\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1 && 'select-menu__item--selected',\n          option.isBlocked && 'select-menu__item--blocked',\n        ])}\n        data-value={option.value}\n        data-is-blocked={option.isBlocked}\n        data-feature={option.feature}\n        data-role={'OPTION'}\n        tabIndex={option.isBlocked ? -1 : 0}\n        aria-current={\n          selected?.split(', ').filter((value) => value === option.value)\n            .length === 1\n            ? 'true'\n            : undefined\n        }\n        aria-disabled={option.isBlocked}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n          if ((e.key === ' ' || e.key === 'Enter') && !option.isBlocked) {\n            option.action && option.action(e)\n            onCancellation?.()\n          }\n          if (e.key === 'Escape')\n            this.setState({ openedGroup: 'EMPTY' }, () =>\n              this.focusFirstMenuItem()\n            )\n\n          return null\n        }}\n        onMouseDown={!option.isBlocked ? option.action : undefined}\n      >\n        {selected?.split(', ').filter((value) => value === option.value)\n          .length === 1 && (\n          <span className=\"select-menu__item__tick\">\n            <Icon\n              type=\"PICTO\"\n              iconName=\"check\"\n            />\n          </span>\n        )}\n        <span\n          className={doClassnames([\n            texts['type--small'],\n            texts.type,\n            'select-menu__item__label',\n          ])}\n        >\n          {option.label}\n        </span>\n        {(option.isBlocked || option.isNew) && (\n          <Chip preview={preview}>{option.isNew ? 'New' : 'Pro'}</Chip>\n        )}\n      </li>\n    )\n  }\n\n  render() {\n    const { options, direction, shouldScroll, menuRef } = this.props\n    const { listScrollOffset, listScrollAmount } = this.state\n\n    return (\n      <div\n        className=\"select-menu\"\n        style={{\n          height: shouldScroll ? '100%' : 'auto',\n        }}\n      >\n        {shouldScroll && listScrollOffset !== 0 && listScrollAmount !== 0 && (\n          <div\n            className=\"select-menu__spot select-menu__spot--top\"\n            onMouseEnter={() => this.startScrolling('UP')}\n            onMouseLeave={this.stopScrolling}\n          >\n            <Icon\n              type=\"PICTO\"\n              iconName=\"chevron-up\"\n            />\n          </div>\n        )}\n        <ul\n          className={doClassnames([\n            'select-menu__menu',\n            'select-menu__menu--active',\n            direction === 'RIGHT'\n              ? 'select-menu__menu--right'\n              : 'select-menu__menu--left',\n            shouldScroll && 'select-menu__menu--scrolling',\n          ])}\n          onScroll={this.onScroll}\n          ref={menuRef}\n        >\n          {options?.map((option, index) => {\n            const isActive =\n                option.isActive !== undefined ? option.isActive : true,\n              isBlocked =\n                option.isBlocked !== undefined ? option.isBlocked : false,\n              isNew = option.isNew !== undefined ? option.isNew : false,\n              children = option.children !== undefined ? option.children : []\n\n            if (isActive && option.type === 'SEPARATOR')\n              return this.MenuSeparator(index)\n            if (isActive && option.type === 'TITLE')\n              return this.MenuTitle(option, index)\n            if (isActive && option.type === 'OPTION')\n              return this.MenuOption(\n                { ...option, isActive, isBlocked, isNew, children },\n                index\n              )\n            if (isActive && option.type === 'GROUP' && children) {\n              const activeChildren = children.filter(\n                (child) => child.isActive !== false\n              )\n\n              if (activeChildren.length > 1)\n                return this.MenuGroup(\n                  { ...option, isActive, isBlocked, isNew, children },\n                  index\n                )\n              else if (activeChildren.length === 1)\n                return this.MenuOption(\n                  {\n                    ...activeChildren[0],\n                    isActive: activeChildren[0].isActive,\n                    isBlocked: activeChildren[0].isBlocked,\n                    isNew: activeChildren[0].isNew,\n                  },\n                  index\n                )\n              else return null\n            }\n            return null\n          })}\n        </ul>\n        {shouldScroll &&\n          listScrollAmount !== listScrollOffset &&\n          listScrollAmount !== 0 && (\n            <div\n              className=\"select-menu__spot select-menu__spot--bottom\"\n              onMouseEnter={() => this.startScrolling('DOWN')}\n              onMouseLeave={this.stopScrolling}\n            >\n              <Icon\n                type=\"PICTO\"\n                iconName=\"chevron-down\"\n              />\n            </div>\n          )}\n      </div>\n    )\n  }\n}\n"],"names":["ActionsList","React","props","prevProps","prevState","shouldScroll","openedGroup","list","subMenuElement","rect","menuRef","menuElement","firstItem","subMenuRef","target","direction","scroll","options","shift","isVisible","jsx","option","index","isActive","isBlocked","isNew","children","activeChildren","child","doClassnames","texts","selected","preview","onCancellation","jsxs","value","e","Icon","Chip","listScrollOffset","listScrollAmount"],"mappings":"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"}

package/dist/components/lists/sortable-list/SortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"names":[],"mappings":"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"}

package/dist/components/lists/sortable-list/SortableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n  id: string | undefined\n  position: number\n}\n\ninterface DefaultData {\n  id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n  hasGuideAbove: boolean\n  hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n  /**\n   * Array of data items\n   */\n  data: Array<T>\n  /**\n   * Array of primary content nodes\n   */\n  primarySlot: Array<React.ReactNode>\n  /**\n   * Array of secondary content configurations\n   */\n  secondarySlot?: Array<{\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }>\n  /**\n   * Array of action button nodes\n   */\n  actionsSlot?: Array<React.ReactNode>\n  /**\n   * Content to display when list is empty\n   */\n  emptySlot?: React.ReactNode\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether the list is scrollable\n   * @default false\n   */\n  isScrollable?: boolean\n  /**\n   * Whether to show a top border on scroll\n   * @default false\n   */\n  isTopBorderEnabled?: boolean\n  /**\n   * Whether the list can be empty\n   * @default true\n   */\n  canBeEmpty?: boolean\n  /**\n   * Whether the list is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Change handler when list is reordered\n   */\n  onChangeSortableList: (data: Array<T>) => void\n  /**\n   * Remove item handler\n   */\n  onRemoveItem: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions: () => void\n}\n\nexport interface SortableListState {\n  selectedElement: SelectedColor\n  hoveredElement: HoveredColor\n  hasTopBorder: boolean\n}\n\nexport default class SortableList<T extends DefaultData> extends React.Component<\n  SortableListProps<T>,\n  SortableListState\n> {\n  private listRef: React.RefObject<HTMLUListElement>\n\n  static defaultProps: Partial<SortableListProps> = {\n    isScrollable: false,\n    isTopBorderEnabled: false,\n    canBeEmpty: true,\n    isBlocked: false,\n  }\n\n  constructor(props: SortableListProps<T>) {\n    super(props)\n    this.state = {\n      selectedElement: {\n        id: undefined,\n        position: 0,\n      },\n      hoveredElement: {\n        id: undefined,\n        hasGuideAbove: false,\n        hasGuideBelow: false,\n        position: 0,\n      },\n      hasTopBorder: false,\n    }\n    this.listRef = React.createRef()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  // Lifecycle\n  componentDidMount = () =>\n    document.addEventListener('mousedown', this.handleClickOutside)\n\n  componentWillUnmount = () =>\n    document.removeEventListener('mousedown', this.handleClickOutside)\n\n  handleClickOutside = (e: Event) => {\n    if (this.listRef.current !== null)\n      if (\n        !this.listRef.current.contains(e.target as HTMLElement) ||\n        e.target === this.listRef.current\n      )\n        this.setState({\n          selectedElement: {\n            id: undefined,\n            position: 0,\n          },\n        })\n  }\n\n  // Handlers\n  orderHandler = () => {\n    const { onChangeSortableList, data } = this.props\n    const { selectedElement, hoveredElement } = this.state\n\n    const source: SelectedColor = selectedElement,\n      target: HoveredColor = hoveredElement,\n      duplicatedData = data.map((el) => el)\n\n    let position: number\n    const sourceIndex = duplicatedData.findIndex(\n      (item) => item.id === source.id\n    )\n\n    const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n    if (target.hasGuideAbove && target.position > source.position)\n      position = target.position - 1\n    else if (target.hasGuideBelow && target.position > source.position)\n      position = target.position\n    else if (target.hasGuideAbove && target.position < source.position)\n      position = target.position\n    else if (target.hasGuideBelow && target.position < source.position)\n      position = target.position + 1\n    else position = target.position\n\n    duplicatedData.splice(position, 0, removedElement)\n\n    onChangeSortableList(duplicatedData)\n  }\n\n  selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n    React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const item = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      target.tagName === 'INPUT' ||\n      target.tagName === 'BUTTON' ||\n      target.tagName === 'TEXTAREA'\n    )\n      return this.setState({\n        selectedElement: {\n          id: undefined,\n          position: 0,\n        },\n      })\n\n    return this.setState({\n      selectedElement: {\n        id: item.dataset.id,\n        position: parseFloat(item.dataset.position ?? '0'),\n      },\n    })\n  }\n\n  dragHandler = (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => {\n    this.setState({\n      hoveredElement: {\n        id: id,\n        hasGuideAbove: hasGuideAbove,\n        hasGuideBelow: hasGuideBelow,\n        position: position,\n      },\n    })\n  }\n\n  dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n    const target = e.target,\n      parent: ParentNode =\n        (target as HTMLElement).parentNode ?? (target as HTMLElement),\n      scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n        .scrollTop,\n      parentRefTop: number = (parent as HTMLElement).offsetTop,\n      parentRefBottom: number =\n        parentRefTop + (parent as HTMLElement).clientHeight\n\n    if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n    else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n  }\n\n  removeHandler = (\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ) => {\n    const { onChangeSortableList, data } = this.props\n    const duplicatedData = data.map((el) => el)\n    let id: string | null\n    const element: HTMLElement | null = (\n      e.currentTarget as HTMLElement\n    ).closest('.draggable-item')\n\n    element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n    onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n  }\n\n  // Direct Actions\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const { isTopBorderEnabled } = this.props\n\n    e.preventDefault()\n    if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n      this.setState({ hasTopBorder: true })\n    else this.setState({ hasTopBorder: false })\n  }\n\n  // Render\n  render() {\n    const {\n      data,\n      canBeEmpty,\n      isBlocked,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      emptySlot,\n      helpers,\n      isScrollable,\n      onRemoveItem,\n      onRefoldOptions,\n    } = this.props\n    const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n    if (data.length === 0 && canBeEmpty)\n      return <div className=\"sortable-list\">{emptySlot}</div>\n    return (\n      <ul\n        className={doClassnames([\n          'sortable-list',\n          isScrollable && 'sortable-list--scrollable',\n          hasTopBorder && 'sortable-list--top-border',\n        ])}\n        onScroll={this.onScroll}\n        ref={this.listRef}\n      >\n        {data.map((item, index) => (\n          <DraggableItem\n            key={item.id}\n            id={item.id}\n            index={index}\n            canBeRemoved={\n              (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n            }\n            primarySlot={primarySlot[index]}\n            secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n            actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n            selected={selectedElement.id === item.id}\n            helpers={{\n              remove: helpers?.remove,\n              more: helpers?.more,\n            }}\n            guideAbove={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideAbove\n                : false\n            }\n            guideBelow={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideBelow\n                : false\n            }\n            isBlocked={isBlocked}\n            onCancelSelection={this.selectionHandler}\n            onRefoldOptions={onRefoldOptions}\n            onChangeOrder={this.orderHandler}\n            onRemove={onRemoveItem}\n            onChangeSelection={this.selectionHandler}\n            onDragChange={this.dragHandler}\n            onDropOutside={this.orderHandler}\n            aria-selected={selectedElement.id === item.id}\n          />\n        ))}\n      </ul>\n    )\n  }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":";;;;AA+FA,MAAqBA,UAA4CC,EAAM,UAGrE;AAAA,EACQ;AAAA,EAER,OAAO,eAA2C;AAAA,IAChD,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAGb,YAAYC,GAA6B;AACvC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,iBAAiB;AAAA,QACf,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,MAEZ,gBAAgB;AAAA,QACd,IAAI;AAAA,QACJ,eAAe;AAAA,QACf,eAAe;AAAA,QACf,UAAU;AAAA,MAAA;AAAA,MAEZ,cAAc;AAAA,IAAA,GAEhB,KAAK,UAAUD,EAAM,UAAA,GACrB,KAAK,qBAAqB,KAAK,mBAAmB,KAAK,IAAI;AAAA,EAC7D;AAAA;AAAA,EAGA,oBAAoB,MAClB,SAAS,iBAAiB,aAAa,KAAK,kBAAkB;AAAA,EAEhE,uBAAuB,MACrB,SAAS,oBAAoB,aAAa,KAAK,kBAAkB;AAAA,EAEnE,qBAAqB,CAAC,MAAa;AACjC,IAAI,KAAK,QAAQ,YAAY,SAEzB,CAAC,KAAK,QAAQ,QAAQ,SAAS,EAAE,MAAqB,KACtD,EAAE,WAAW,KAAK,QAAQ,YAE1B,KAAK,SAAS;AAAA,MACZ,iBAAiB;AAAA,QACf,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,IACZ,CACD;AAAA,EACP;AAAA;AAAA,EAGA,eAAe,MAAM;AACnB,UAAM,EAAE,sBAAAE,GAAsB,MAAAC,EAAA,IAAS,KAAK,OACtC,EAAE,iBAAAC,GAAiB,gBAAAC,EAAA,IAAmB,KAAK,OAE3CC,IAAwBF,GAC5BG,IAAuBF,GACvBG,IAAiBL,EAAK,IAAI,CAACM,MAAOA,CAAE;AAEtC,QAAIC;AACJ,UAAMC,IAAcH,EAAe;AAAA,MACjC,CAACI,MAASA,EAAK,OAAON,EAAO;AAAA,IAAA,GAGzB,CAACO,CAAc,IAAIL,EAAe,OAAOG,GAAa,CAAC;AAE7D,IAAIJ,EAAO,iBAAiBA,EAAO,WAAWD,EAAO,WACnDI,IAAWH,EAAO,WAAW,IACtBA,EAAO,iBAAiBA,EAAO,WAAWD,EAAO,YAEjDC,EAAO,iBAAiBA,EAAO,WAAWD,EAAO,WADxDI,IAAWH,EAAO,WAGXA,EAAO,iBAAiBA,EAAO,WAAWD,EAAO,WACxDI,IAAWH,EAAO,WAAW,QACfA,EAAO,UAEvBC,EAAe,OAAOE,GAAU,GAAGG,CAAc,GAEjDX,EAAqBM,CAAc;AAAA,EACrC;AAAA,EAEA,mBAE8C,CAAC,MAAM;AACnD,UAAMI,IAAO,EAAE,eACTL,IAAS,EAAE;AAEjB,WACEA,EAAO,YAAY,WACnBA,EAAO,YAAY,YACnBA,EAAO,YAAY,aAEZ,KAAK,SAAS;AAAA,MACnB,iBAAiB;AAAA,QACf,IAAI;AAAA,QACJ,UAAU;AAAA,MAAA;AAAA,IACZ,CACD,IAEI,KAAK,SAAS;AAAA,MACnB,iBAAiB;AAAA,QACf,IAAIK,EAAK,QAAQ;AAAA,QACjB,UAAU,WAAWA,EAAK,QAAQ,YAAY,GAAG;AAAA,MAAA;AAAA,IACnD,CACD;AAAA,EACH;AAAA,EAEA,cAAc,CACZE,GACAC,GACAC,GACAN,MACG;AACH,SAAK,SAAS;AAAA,MACZ,gBAAgB;AAAA,QACd,IAAAI;AAAA,QACA,eAAAC;AAAA,QACA,eAAAC;AAAA,QACA,UAAAN;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AAAA,EAEA,qBAAqB,CAAC,MAAsC;AAC1D,UAAMH,IAAS,EAAE,QACfU,IACGV,EAAuB,cAAeA,GACzCW,KAAmBD,EAAO,YAAY,YACnC,WACHE,IAAwBF,EAAuB,WAC/CG,IACED,IAAgBF,EAAuB;AAE3C,IAAI,EAAE,QAAQC,IAAUC,SAAmB,aAAA,IAClC,EAAE,QAAQD,IAAUE,UAAsB,aAAA;AAAA,EACrD;AAAA,EAEA,gBAAgB,CACd,MACG;AACH,UAAM,EAAE,sBAAAlB,GAAsB,MAAAC,EAAA,IAAS,KAAK,OACtCK,IAAiBL,EAAK,IAAI,CAACM,MAAOA,CAAE;AAC1C,QAAIK;AACJ,UAAMO,IACJ,EAAE,cACF,QAAQ,iBAAiB;AAE3B,IAAAA,MAAY,OAAQP,IAAKO,EAAQ,aAAa,SAAS,IAAMP,IAAK,MAElEZ,EAAqBM,EAAe,OAAO,CAACI,MAASA,EAAK,OAAOE,CAAE,CAAC;AAAA,EACtE;AAAA;AAAA,EAGA,WAAW,CAAC,MAAuC;AACjD,UAAM,EAAE,oBAAAQ,MAAuB,KAAK;AAEpC,MAAE,eAAA,GACE,EAAE,cAAc,YAAY,KAAKA,IACnC,KAAK,SAAS,EAAE,cAAc,GAAA,CAAM,IACjC,KAAK,SAAS,EAAE,cAAc,IAAO;AAAA,EAC5C;AAAA;AAAA,EAGA,SAAS;AACP,UAAM;AAAA,MACJ,MAAAnB;AAAA,MACA,YAAAoB;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA,IACE,KAAK,OACH,EAAE,iBAAA5B,GAAiB,gBAAAC,GAAgB,cAAA4B,EAAA,IAAiB,KAAK;AAE/D,WAAI9B,EAAK,WAAW,KAAKoB,IAChB,gBAAAW,EAAC,OAAA,EAAI,WAAU,iBAAiB,UAAAN,GAAU,IAEjD,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACAL,KAAgB;AAAA,UAChBG,KAAgB;AAAA,QAAA,CACjB;AAAA,QACD,UAAU,KAAK;AAAA,QACf,KAAK,KAAK;AAAA,QAET,UAAA9B,EAAK,IAAI,CAACS,GAAMwB,MACf,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YAEC,IAAIzB,EAAK;AAAA,YACT,OAAAwB;AAAA,YACA,cACGjC,EAAK,SAAS,KAAK,CAACqB,KAAeD,KAAc,CAACC;AAAA,YAErD,aAAaC,EAAYW,CAAK;AAAA,YAC9B,eAAeV,IAAgBA,EAAcU,CAAK,IAAI;AAAA,YACtD,aAAaT,IAAcA,EAAYS,CAAK,IAAI;AAAA,YAChD,UAAUhC,EAAgB,OAAOQ,EAAK;AAAA,YACtC,SAAS;AAAA,cACP,QAAQiB,GAAS;AAAA,cACjB,MAAMA,GAAS;AAAA,YAAA;AAAA,YAEjB,YACExB,EAAe,OAAOO,EAAK,KACvBP,EAAe,gBACf;AAAA,YAEN,YACEA,EAAe,OAAOO,EAAK,KACvBP,EAAe,gBACf;AAAA,YAEN,WAAAmB;AAAA,YACA,mBAAmB,KAAK;AAAA,YACxB,iBAAAQ;AAAA,YACA,eAAe,KAAK;AAAA,YACpB,UAAUD;AAAA,YACV,mBAAmB,KAAK;AAAA,YACxB,cAAc,KAAK;AAAA,YACnB,eAAe,KAAK;AAAA,YACpB,iBAAe3B,EAAgB,OAAOQ,EAAK;AAAA,UAAA;AAAA,UAhCtCA,EAAK;AAAA,QAAA,CAkCb;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n  id: string | undefined\n  position: number\n}\n\ninterface DefaultData {\n  id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n  hasGuideAbove: boolean\n  hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n  /**\n   * Array of data items\n   */\n  data: Array<T>\n  /**\n   * Array of primary content nodes\n   */\n  primarySlot: Array<React.ReactNode>\n  /**\n   * Array of secondary content configurations\n   */\n  secondarySlot?: Array<{\n    /** Title for the secondary content */\n    title: string\n    /** Content node */\n    node: React.ReactNode\n  }>\n  /**\n   * Array of action button nodes\n   */\n  actionsSlot?: Array<React.ReactNode>\n  /**\n   * Content to display when list is empty\n   */\n  emptySlot?: React.ReactNode\n  /**\n   * Helper texts for buttons\n   */\n  helpers?: {\n    /** Helper for remove button */\n    remove?: string\n    /** Helper for more options button */\n    more?: string\n  }\n  /**\n   * Whether the list is scrollable\n   * @default false\n   */\n  isScrollable?: boolean\n  /**\n   * Whether to show a top border on scroll\n   * @default false\n   */\n  isTopBorderEnabled?: boolean\n  /**\n   * Whether the list can be empty\n   * @default true\n   */\n  canBeEmpty?: boolean\n  /**\n   * Whether the list is blocked\n   * @default false\n   */\n  isBlocked?: boolean\n  /**\n   * Change handler when list is reordered\n   */\n  onChangeSortableList: (data: Array<T>) => void\n  /**\n   * Remove item handler\n   */\n  onRemoveItem: React.MouseEventHandler<Element> &\n    React.KeyboardEventHandler<Element>\n  /**\n   * Refold options handler\n   */\n  onRefoldOptions: () => void\n}\n\nexport interface SortableListState {\n  selectedElement: SelectedColor\n  hoveredElement: HoveredColor\n  hasTopBorder: boolean\n}\n\nexport default class SortableList<\n  T extends DefaultData,\n> extends React.Component<SortableListProps<T>, SortableListState> {\n  private listRef: React.RefObject<HTMLUListElement>\n\n  static defaultProps: Partial<SortableListProps> = {\n    isScrollable: false,\n    isTopBorderEnabled: false,\n    canBeEmpty: true,\n    isBlocked: false,\n  }\n\n  constructor(props: SortableListProps<T>) {\n    super(props)\n    this.state = {\n      selectedElement: {\n        id: undefined,\n        position: 0,\n      },\n      hoveredElement: {\n        id: undefined,\n        hasGuideAbove: false,\n        hasGuideBelow: false,\n        position: 0,\n      },\n      hasTopBorder: false,\n    }\n    this.listRef = React.createRef()\n    this.handleClickOutside = this.handleClickOutside.bind(this)\n  }\n\n  // Lifecycle\n  componentDidMount = () =>\n    document.addEventListener('mousedown', this.handleClickOutside)\n\n  componentWillUnmount = () =>\n    document.removeEventListener('mousedown', this.handleClickOutside)\n\n  handleClickOutside = (e: Event) => {\n    if (this.listRef.current !== null)\n      if (\n        !this.listRef.current.contains(e.target as HTMLElement) ||\n        e.target === this.listRef.current\n      )\n        this.setState({\n          selectedElement: {\n            id: undefined,\n            position: 0,\n          },\n        })\n  }\n\n  // Handlers\n  orderHandler = () => {\n    const { onChangeSortableList, data } = this.props\n    const { selectedElement, hoveredElement } = this.state\n\n    const source: SelectedColor = selectedElement,\n      target: HoveredColor = hoveredElement,\n      duplicatedData = data.map((el) => el)\n\n    let position: number\n    const sourceIndex = duplicatedData.findIndex(\n      (item) => item.id === source.id\n    )\n\n    const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n    if (target.hasGuideAbove && target.position > source.position)\n      position = target.position - 1\n    else if (target.hasGuideBelow && target.position > source.position)\n      position = target.position\n    else if (target.hasGuideAbove && target.position < source.position)\n      position = target.position\n    else if (target.hasGuideBelow && target.position < source.position)\n      position = target.position + 1\n    else position = target.position\n\n    duplicatedData.splice(position, 0, removedElement)\n\n    onChangeSortableList(duplicatedData)\n  }\n\n  selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n    React.MouseEventHandler<Element> &\n    React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const item = e.currentTarget as HTMLElement\n    const target = e.target as HTMLElement\n\n    if (\n      target.tagName === 'INPUT' ||\n      target.tagName === 'BUTTON' ||\n      target.tagName === 'TEXTAREA'\n    )\n      return this.setState({\n        selectedElement: {\n          id: undefined,\n          position: 0,\n        },\n      })\n\n    return this.setState({\n      selectedElement: {\n        id: item.dataset.id,\n        position: parseFloat(item.dataset.position ?? '0'),\n      },\n    })\n  }\n\n  dragHandler = (\n    id: string | undefined,\n    hasGuideAbove: boolean,\n    hasGuideBelow: boolean,\n    position: number\n  ) => {\n    this.setState({\n      hoveredElement: {\n        id: id,\n        hasGuideAbove: hasGuideAbove,\n        hasGuideBelow: hasGuideBelow,\n        position: position,\n      },\n    })\n  }\n\n  dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n    const target = e.target,\n      parent: ParentNode =\n        (target as HTMLElement).parentNode ?? (target as HTMLElement),\n      scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n        .scrollTop,\n      parentRefTop: number = (parent as HTMLElement).offsetTop,\n      parentRefBottom: number =\n        parentRefTop + (parent as HTMLElement).clientHeight\n\n    if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n    else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n  }\n\n  removeHandler = (\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ) => {\n    const { onChangeSortableList, data } = this.props\n    const duplicatedData = data.map((el) => el)\n    let id: string | null\n    const element: HTMLElement | null = (\n      e.currentTarget as HTMLElement\n    ).closest('.draggable-item')\n\n    element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n    onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n  }\n\n  // Direct Actions\n  onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n    const { isTopBorderEnabled } = this.props\n\n    e.preventDefault()\n    if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n      this.setState({ hasTopBorder: true })\n    else this.setState({ hasTopBorder: false })\n  }\n\n  // Render\n  render() {\n    const {\n      data,\n      canBeEmpty,\n      isBlocked,\n      primarySlot,\n      secondarySlot,\n      actionsSlot,\n      emptySlot,\n      helpers,\n      isScrollable,\n      onRemoveItem,\n      onRefoldOptions,\n    } = this.props\n    const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n    if (data.length === 0 && canBeEmpty)\n      return <div className=\"sortable-list\">{emptySlot}</div>\n    return (\n      <ul\n        className={doClassnames([\n          'sortable-list',\n          isScrollable && 'sortable-list--scrollable',\n          hasTopBorder && 'sortable-list--top-border',\n        ])}\n        onScroll={this.onScroll}\n        ref={this.listRef}\n      >\n        {data.map((item, index) => (\n          <DraggableItem\n            key={item.id}\n            id={item.id}\n            index={index}\n            canBeRemoved={\n              (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n            }\n            primarySlot={primarySlot[index]}\n            secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n            actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n            selected={selectedElement.id === item.id}\n            helpers={{\n              remove: helpers?.remove,\n              more: helpers?.more,\n            }}\n            guideAbove={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideAbove\n                : false\n            }\n            guideBelow={\n              hoveredElement.id === item.id\n                ? hoveredElement.hasGuideBelow\n                : false\n            }\n            isBlocked={isBlocked}\n            onCancelSelection={this.selectionHandler}\n            onRefoldOptions={onRefoldOptions}\n            onChangeOrder={this.orderHandler}\n            onRemove={onRemoveItem}\n            onChangeSelection={this.selectionHandler}\n            onDragChange={this.dragHandler}\n            onDropOutside={this.orderHandler}\n            aria-selected={selectedElement.id === item.id}\n          />\n        ))}\n      </ul>\n    )\n  }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":"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"}

package/dist/components/lists/tabs/Tabs.figma.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { i } from "../../../index_react-BkjUklDQ.js";
+import { i } from "../../../index_react-D2vn0nVd.js";
 import e from "./Tabs.js";
 i.figma.connect(
   e,

package/dist/components/slots/bar/Bar.d.ts

@@ -53,6 +53,11 @@ export interface BarProps {
      * @default false
      */
     shouldReflow?: boolean;
+    /**
+     * Whether to use a vertical (column) layout
+     * @default false
+     */
+    isVertical?: boolean;
 }
 export default class Bar extends React.Component<BarProps> {
     static defaultProps: Partial<BarProps>;

package/dist/components/slots/bar/Bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAMrC;IAED,SAAS,GACP,aAAa,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAcpE;IAED,MAAM;CA+EP"}
+{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAOrC;IAED,SAAS,GACP,aAAa,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAcpE;IAED,MAAM;CAiFP"}

package/dist/components/slots/bar/Bar.js

@@ -1,19 +1,20 @@
 import '../../../assets/Bar.css';
-import { jsx as t, jsxs as v } from "react/jsx-runtime";
-import T from "react";
-import { t as g } from "../../../do-classnames-DSDFCvzy.js";
-class C extends T.Component {
+import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import g from "react";
+import { t as x } from "../../../do-classnames-DSDFCvzy.js";
+class N extends g.Component {
   static defaultProps = {
     isCompact: !1,
     isOnlyText: !1,
     isInverted: !1,
     isCentered: !1,
-    shouldReflow: !1
+    shouldReflow: !1,
+    isVertical: !1
   };
   setBorder = (s) => {
     const e = "var(--bar-border-width) solid var(--bar-border-color)", r = {};
-    return s && s.forEach((o) => {
-      o === "TOP" && (r.borderTop = e), o === "LEFT" && (r.borderLeft = e), o === "BOTTOM" && (r.borderBottom = e), o === "RIGHT" && (r.borderRight = e);
+    return s && s.forEach((l) => {
+      l === "TOP" && (r.borderTop = e), l === "LEFT" && (r.borderLeft = e), l === "BOTTOM" && (r.borderBottom = e), l === "RIGHT" && (r.borderRight = e);
     }), r;
   };
   render() {
@@ -21,27 +22,29 @@ class C extends T.Component {
       id: s,
       isCompact: e,
       isOnlyText: r,
-      isInverted: o,
+      isInverted: l,
       isCentered: p,
       shouldReflow: h,
+      isVertical: u,
       border: c,
       padding: n,
-      clip: l,
+      clip: o,
       leftPartSlot: a,
       soloPartSlot: i,
       rightPartSlot: d
-    } = this.props, f = i != null, u = a != null, m = d != null;
-    if (!f && !u && !m) return null;
-    const b = g([
+    } = this.props, f = i != null, m = a != null, v = d != null;
+    if (!f && !m && !v) return null;
+    const b = x([
       "bar",
       e && "bar--compact",
       r && "bar--text-only",
-      o && "bar--inverted",
+      l && "bar--inverted",
       p && "bar--centered",
       h && "bar--reflow",
-      l && l.includes("LEFT") && "bar--clip-left",
-      l && l.includes("RIGHT") && "bar--clip-right",
-      l && l.includes("SOLO") && "bar--clip-solo"
+      u && "bar--vertical",
+      o && o.includes("LEFT") && "bar--clip-left",
+      o && o.includes("RIGHT") && "bar--clip-right",
+      o && o.includes("SOLO") && "bar--clip-solo"
     ]);
     return f ? /* @__PURE__ */ t(
       "div",
@@ -62,7 +65,7 @@ class C extends T.Component {
           }
         )
       }
-    ) : /* @__PURE__ */ v(
+    ) : /* @__PURE__ */ T(
       "div",
       {
         id: s,
@@ -95,6 +98,6 @@ class C extends T.Component {
   }
 }
 export {
-  C as default
+  N as default
 };
 //# sourceMappingURL=Bar.js.map

package/dist/components/slots/bar/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport './bar.scss'\n\nexport interface BarProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Content for the left section\n   */\n  leftPartSlot?: React.ReactElement | null\n  /**\n   * Content for the center section (when used alone)\n   */\n  soloPartSlot?: React.ReactElement | null\n  /**\n   * Content for the right section\n   */\n  rightPartSlot?: React.ReactElement | null\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n  /**\n   * Array of clip positions (for visual effects)\n   */\n  clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>\n  /**\n   * Custom padding value\n   */\n  padding?: string\n  /**\n   * Whether to use compact spacing\n   * @default false\n   */\n  isCompact?: boolean\n  /**\n   * Whether the bar contains only text\n   * @default false\n   */\n  isOnlyText?: boolean\n  /**\n   * Whether to use inverted color scheme\n   * @default false\n   */\n  isInverted?: boolean\n  /**\n   * Whether to center the content\n   * @default false\n   */\n  isCentered?: boolean\n  /**\n   * Whether to reflow on small screens\n   * @default false\n   */\n  shouldReflow?: boolean\n}\n\nexport default class Bar extends React.Component<BarProps> {\n  static defaultProps: Partial<BarProps> = {\n    isCompact: false,\n    isOnlyText: false,\n    isInverted: false,\n    isCentered: false,\n    shouldReflow: false,\n  }\n\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property =\n      'var(--bar-border-width) solid var(--bar-border-color)' as React.CSSProperties\n    const styles: { [key: string]: React.CSSProperties } = {}\n\n    if (!orientation) return styles\n    orientation.forEach((entry) => {\n      if (entry === 'TOP') styles.borderTop = property\n      if (entry === 'LEFT') styles.borderLeft = property\n      if (entry === 'BOTTOM') styles.borderBottom = property\n      if (entry === 'RIGHT') styles.borderRight = property\n    })\n    return styles\n  }\n\n  render() {\n    const {\n      id,\n      isCompact,\n      isOnlyText,\n      isInverted,\n      isCentered,\n      shouldReflow,\n      border,\n      padding,\n      clip,\n      leftPartSlot,\n      soloPartSlot,\n      rightPartSlot,\n    } = this.props\n\n    const hasValidSolo = soloPartSlot !== undefined && soloPartSlot !== null\n    const hasValidLeft = leftPartSlot !== undefined && leftPartSlot !== null\n    const hasValidRight = rightPartSlot !== undefined && rightPartSlot !== null\n\n    if (!hasValidSolo && !hasValidLeft && !hasValidRight) return null\n\n    const barClassName = doClassnames([\n      'bar',\n      isCompact && 'bar--compact',\n      isOnlyText && 'bar--text-only',\n      isInverted && 'bar--inverted',\n      isCentered && 'bar--centered',\n      shouldReflow && 'bar--reflow',\n      clip && clip.includes('LEFT') && 'bar--clip-left',\n      clip && clip.includes('RIGHT') && 'bar--clip-right',\n      clip && clip.includes('SOLO') && 'bar--clip-solo',\n    ])\n\n    if (hasValidSolo)\n      return (\n        <div\n          id={id}\n          className={barClassName}\n          style={{\n            ...this.setBorder(border),\n            padding: padding,\n          }}\n          role=\"toolbar\"\n        >\n          <div\n            className=\"bar__solo\"\n            role=\"group\"\n          >\n            {soloPartSlot}\n          </div>\n        </div>\n      )\n\n    return (\n      <div\n        id={id}\n        className={barClassName}\n        style={{\n          ...this.setBorder(border),\n          padding: padding,\n        }}\n        role=\"toolbar\"\n      >\n        <div\n          className=\"bar__left\"\n          role=\"group\"\n        >\n          {leftPartSlot}\n        </div>\n        <div\n          className=\"bar__right\"\n          role=\"group\"\n        >\n          {rightPartSlot}\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["Bar","React","orientation","property","styles","entry","id","isCompact","isOnlyText","isInverted","isCentered","shouldReflow","border","padding","clip","leftPartSlot","soloPartSlot","rightPartSlot","hasValidSolo","hasValidLeft","hasValidRight","barClassName","doClassnames","jsx","jsxs"],"mappings":";;;AA4DA,MAAqBA,UAAYC,EAAM,UAAoB;AAAA,EACzD,OAAO,eAAkC;AAAA,IACvC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAAA;AAAA,EAGhB,YAAY,CACVC,MACG;AACH,UAAMC,IACJ,yDACIC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAE;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,IAAA,IACE,KAAK,OAEHC,IAA6CF,KAAiB,MAC9DG,IAA6CJ,KAAiB,MAC9DK,IAA+CH,KAAkB;AAEvE,QAAI,CAACC,KAAgB,CAACC,KAAgB,CAACC,EAAe,QAAO;AAE7D,UAAMC,IAAeC,EAAa;AAAA,MAChC;AAAA,MACAf,KAAa;AAAA,MACbC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAgB;AAAA,MAChBG,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,MACjCA,KAAQA,EAAK,SAAS,OAAO,KAAK;AAAA,MAClCA,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,IAAA,CAClC;AAED,WAAII,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAjB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,IAKJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAlB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport './bar.scss'\n\nexport interface BarProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Content for the left section\n   */\n  leftPartSlot?: React.ReactElement | null\n  /**\n   * Content for the center section (when used alone)\n   */\n  soloPartSlot?: React.ReactElement | null\n  /**\n   * Content for the right section\n   */\n  rightPartSlot?: React.ReactElement | null\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n  /**\n   * Array of clip positions (for visual effects)\n   */\n  clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>\n  /**\n   * Custom padding value\n   */\n  padding?: string\n  /**\n   * Whether to use compact spacing\n   * @default false\n   */\n  isCompact?: boolean\n  /**\n   * Whether the bar contains only text\n   * @default false\n   */\n  isOnlyText?: boolean\n  /**\n   * Whether to use inverted color scheme\n   * @default false\n   */\n  isInverted?: boolean\n  /**\n   * Whether to center the content\n   * @default false\n   */\n  isCentered?: boolean\n  /**\n   * Whether to reflow on small screens\n   * @default false\n   */\n  shouldReflow?: boolean\n  /**\n   * Whether to use a vertical (column) layout\n   * @default false\n   */\n  isVertical?: boolean\n}\n\nexport default class Bar extends React.Component<BarProps> {\n  static defaultProps: Partial<BarProps> = {\n    isCompact: false,\n    isOnlyText: false,\n    isInverted: false,\n    isCentered: false,\n    shouldReflow: false,\n    isVertical: false,\n  }\n\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property =\n      'var(--bar-border-width) solid var(--bar-border-color)' as React.CSSProperties\n    const styles: { [key: string]: React.CSSProperties } = {}\n\n    if (!orientation) return styles\n    orientation.forEach((entry) => {\n      if (entry === 'TOP') styles.borderTop = property\n      if (entry === 'LEFT') styles.borderLeft = property\n      if (entry === 'BOTTOM') styles.borderBottom = property\n      if (entry === 'RIGHT') styles.borderRight = property\n    })\n    return styles\n  }\n\n  render() {\n    const {\n      id,\n      isCompact,\n      isOnlyText,\n      isInverted,\n      isCentered,\n      shouldReflow,\n      isVertical,\n      border,\n      padding,\n      clip,\n      leftPartSlot,\n      soloPartSlot,\n      rightPartSlot,\n    } = this.props\n\n    const hasValidSolo = soloPartSlot !== undefined && soloPartSlot !== null\n    const hasValidLeft = leftPartSlot !== undefined && leftPartSlot !== null\n    const hasValidRight = rightPartSlot !== undefined && rightPartSlot !== null\n\n    if (!hasValidSolo && !hasValidLeft && !hasValidRight) return null\n\n    const barClassName = doClassnames([\n      'bar',\n      isCompact && 'bar--compact',\n      isOnlyText && 'bar--text-only',\n      isInverted && 'bar--inverted',\n      isCentered && 'bar--centered',\n      shouldReflow && 'bar--reflow',\n      isVertical && 'bar--vertical',\n      clip && clip.includes('LEFT') && 'bar--clip-left',\n      clip && clip.includes('RIGHT') && 'bar--clip-right',\n      clip && clip.includes('SOLO') && 'bar--clip-solo',\n    ])\n\n    if (hasValidSolo)\n      return (\n        <div\n          id={id}\n          className={barClassName}\n          style={{\n            ...this.setBorder(border),\n            padding: padding,\n          }}\n          role=\"toolbar\"\n        >\n          <div\n            className=\"bar__solo\"\n            role=\"group\"\n          >\n            {soloPartSlot}\n          </div>\n        </div>\n      )\n\n    return (\n      <div\n        id={id}\n        className={barClassName}\n        style={{\n          ...this.setBorder(border),\n          padding: padding,\n        }}\n        role=\"toolbar\"\n      >\n        <div\n          className=\"bar__left\"\n          role=\"group\"\n        >\n          {leftPartSlot}\n        </div>\n        <div\n          className=\"bar__right\"\n          role=\"group\"\n        >\n          {rightPartSlot}\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["Bar","React","orientation","property","styles","entry","id","isCompact","isOnlyText","isInverted","isCentered","shouldReflow","isVertical","border","padding","clip","leftPartSlot","soloPartSlot","rightPartSlot","hasValidSolo","hasValidLeft","hasValidRight","barClassName","doClassnames","jsx","jsxs"],"mappings":";;;AAiEA,MAAqBA,UAAYC,EAAM,UAAoB;AAAA,EACzD,OAAO,eAAkC;AAAA,IACvC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAAA,EAGd,YAAY,CACVC,MACG;AACH,UAAMC,IACJ,yDACIC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAE;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,IAAA,IACE,KAAK,OAEHC,IAA6CF,KAAiB,MAC9DG,IAA6CJ,KAAiB,MAC9DK,IAA+CH,KAAkB;AAEvE,QAAI,CAACC,KAAgB,CAACC,KAAgB,CAACC,EAAe,QAAO;AAE7D,UAAMC,IAAeC,EAAa;AAAA,MAChC;AAAA,MACAhB,KAAa;AAAA,MACbC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAgB;AAAA,MAChBC,KAAc;AAAA,MACdG,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,MACjCA,KAAQA,EAAK,SAAS,OAAO,KAAK;AAAA,MAClCA,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,IAAA,CAClC;AAED,WAAII,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAlB;AAAA,QACA,WAAWgB;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,IAKJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/components/tags/chip/Chip.figma.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { i as t } from "../../../index_react-BkjUklDQ.js";
+import { i as t } from "../../../index_react-D2vn0nVd.js";
 import e from "./Chip.js";
 t.figma.connect(
   e,

package/dist/components/tags/color-chip/ColorChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorChip.d.ts","sourceRoot":"","sources":["../../../../src/components/tags/color-chip/ColorChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,mBAAmB,CAAA;AAE1B,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAClC;AAED,UAAU,cAAc;IACtB,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IACpF,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,cAAc,CAAC,CAG3C;gBAEW,KAAK,EAAE,cAAc;IAOjC,MAAM;CAqBP"}
+{"version":3,"file":"ColorChip.d.ts","sourceRoot":"","sources":["../../../../src/components/tags/color-chip/ColorChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,mBAAmB,CAAA;AAE1B,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CAClC;AAED,UAAU,cAAc;IACtB,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CACpD,cAAc,EACd,cAAc,CACf;IACC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,cAAc,CAAC,CAG3C;gBAEW,KAAK,EAAE,cAAc;IAOjC,MAAM;CAqBP"}

package/dist/components/tags/color-chip/ColorChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorChip.js","sources":["../../../../src/components/tags/color-chip/ColorChip.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport Tooltip from '../tooltip/Tooltip'\nimport './color-chip.scss'\n\ninterface ColorChipProps {\n  /**\n   * Color value (hex, rgb, etc.)\n   */\n  color: string\n  /**\n   * Width of the chip\n   * @default '16px'\n   */\n  width?: string\n  /**\n   * Height of the chip\n   * @default '16px'\n   */\n  height?: string\n  /**\n   * Whether to use rounded corners\n   */\n  isRounded?: boolean\n  /**\n   * Helper tooltip content\n   */\n  helper?: string | React.ReactNode\n}\n\ninterface ColorChipState {\n  isTooltipVisible: boolean\n}\n\nexport default class ColorChip extends React.Component<ColorChipProps, ColorChipState> {\n  static defaultProps: Partial<ColorChipProps> = {\n    width: '16px',\n    height: '16px',\n  }\n\n  constructor(props: ColorChipProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n    }\n  }\n\n  render() {\n    const { color, width, height, isRounded, helper } = this.props\n    const { isTooltipVisible } = this.state\n\n    return (\n      <div\n        className={doClassnames([\n          'color-chip',\n          isRounded && 'color-chip--rounded',\n        ])}\n        style={{ backgroundColor: color, width: width, height: height }}\n        onMouseEnter={() => {\n          if (helper !== undefined) this.setState({ isTooltipVisible: true })\n        }}\n        onMouseLeave={() => this.setState({ isTooltipVisible: false })}\n        role=\"contentinfo\"\n      >\n        {isTooltipVisible && <Tooltip>{helper}</Tooltip>}\n      </div>\n    )\n  }\n}\n"],"names":["ColorChip","React","props","color","width","height","isRounded","helper","isTooltipVisible","jsx","doClassnames","Tooltip"],"mappings":";;;;AAkCA,MAAqBA,UAAkBC,EAAM,UAA0C;AAAA,EACrF,OAAO,eAAwC;AAAA,IAC7C,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAGV,YAAYC,GAAuB;AACjC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,kBAAkB;AAAA,IAAA;AAAA,EAEtB;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,EAAA,IAAW,KAAK,OACnD,EAAE,kBAAAC,MAAqB,KAAK;AAElC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACAJ,KAAa;AAAA,QAAA,CACd;AAAA,QACD,OAAO,EAAE,iBAAiBH,GAAO,OAAAC,GAAc,QAAAC,EAAA;AAAA,QAC/C,cAAc,MAAM;AAClB,UAAIE,MAAW,UAAW,KAAK,SAAS,EAAE,kBAAkB,IAAM;AAAA,QACpE;AAAA,QACA,cAAc,MAAM,KAAK,SAAS,EAAE,kBAAkB,IAAO;AAAA,QAC7D,MAAK;AAAA,QAEJ,UAAAC,KAAoB,gBAAAC,EAACE,GAAA,EAAS,UAAAJ,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAG5C;AACF;"}
+{"version":3,"file":"ColorChip.js","sources":["../../../../src/components/tags/color-chip/ColorChip.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport Tooltip from '../tooltip/Tooltip'\nimport './color-chip.scss'\n\ninterface ColorChipProps {\n  /**\n   * Color value (hex, rgb, etc.)\n   */\n  color: string\n  /**\n   * Width of the chip\n   * @default '16px'\n   */\n  width?: string\n  /**\n   * Height of the chip\n   * @default '16px'\n   */\n  height?: string\n  /**\n   * Whether to use rounded corners\n   */\n  isRounded?: boolean\n  /**\n   * Helper tooltip content\n   */\n  helper?: string | React.ReactNode\n}\n\ninterface ColorChipState {\n  isTooltipVisible: boolean\n}\n\nexport default class ColorChip extends React.Component<\n  ColorChipProps,\n  ColorChipState\n> {\n  static defaultProps: Partial<ColorChipProps> = {\n    width: '16px',\n    height: '16px',\n  }\n\n  constructor(props: ColorChipProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n    }\n  }\n\n  render() {\n    const { color, width, height, isRounded, helper } = this.props\n    const { isTooltipVisible } = this.state\n\n    return (\n      <div\n        className={doClassnames([\n          'color-chip',\n          isRounded && 'color-chip--rounded',\n        ])}\n        style={{ backgroundColor: color, width: width, height: height }}\n        onMouseEnter={() => {\n          if (helper !== undefined) this.setState({ isTooltipVisible: true })\n        }}\n        onMouseLeave={() => this.setState({ isTooltipVisible: false })}\n        role=\"contentinfo\"\n      >\n        {isTooltipVisible && <Tooltip>{helper}</Tooltip>}\n      </div>\n    )\n  }\n}\n"],"names":["ColorChip","React","props","color","width","height","isRounded","helper","isTooltipVisible","jsx","doClassnames","Tooltip"],"mappings":";;;;AAkCA,MAAqBA,UAAkBC,EAAM,UAG3C;AAAA,EACA,OAAO,eAAwC;AAAA,IAC7C,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAGV,YAAYC,GAAuB;AACjC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,kBAAkB;AAAA,IAAA;AAAA,EAEtB;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,OAAAC,GAAO,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,EAAA,IAAW,KAAK,OACnD,EAAE,kBAAAC,MAAqB,KAAK;AAElC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa;AAAA,UACtB;AAAA,UACAJ,KAAa;AAAA,QAAA,CACd;AAAA,QACD,OAAO,EAAE,iBAAiBH,GAAO,OAAAC,GAAc,QAAAC,EAAA;AAAA,QAC/C,cAAc,MAAM;AAClB,UAAIE,MAAW,UAAW,KAAK,SAAS,EAAE,kBAAkB,IAAM;AAAA,QACpE;AAAA,QACA,cAAc,MAAM,KAAK,SAAS,EAAE,kBAAkB,IAAO;AAAA,QAC7D,MAAK;AAAA,QAEJ,UAAAC,KAAoB,gBAAAC,EAACE,GAAA,EAAS,UAAAJ,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAG5C;AACF;"}

package/dist/components/tags/icon-chip/IconChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconChip.d.ts","sourceRoot":"","sources":["../../../../src/components/tags/icon-chip/IconChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAG1C,OAAO,kBAAkB,CAAA;AAEzB,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,YAAY,CAAA;CACnD;AAED,UAAU,aAAa;IACrB,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IACjF,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,CAI1C;gBAEW,KAAK,EAAE,aAAa;IAOhC,MAAM;CA6BP"}
+{"version":3,"file":"IconChip.d.ts","sourceRoot":"","sources":["../../../../src/components/tags/icon-chip/IconChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAG1C,OAAO,kBAAkB,CAAA;AAEzB,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,YAAY,CAAA;CACnD;AAED,UAAU,aAAa;IACrB,gBAAgB,EAAE,OAAO,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,KAAK,CAAC,SAAS,CACnD,aAAa,EACb,aAAa,CACd;IACC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,aAAa,CAAC,CAI1C;gBAEW,KAAK,EAAE,aAAa;IAOhC,MAAM;CA6BP"}

package/dist/components/tags/icon-chip/IconChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconChip.js","sources":["../../../../src/components/tags/icon-chip/IconChip.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport { IconList } from '@tps/icon.types'\nimport Icon from '@components/assets/icon/Icon'\nimport Tooltip from '../tooltip/Tooltip'\nimport './icon-chip.scss'\n\ninterface IconChipProps {\n  /**\n   * Type of icon\n   */\n  iconType: 'PICTO' | 'LETTER'\n  /**\n   * Icon name (when type is PICTO)\n   * @default 'adjust'\n   */\n  iconName?: IconList\n  /**\n   * Letter to display (when type is LETTER)\n   */\n  iconLetter?: string\n  /**\n   * Tooltip text content\n   */\n  text: string | React.ReactNode\n  /**\n   * Tooltip position\n   * @default 'BOTTOM'\n   */\n  pin?: 'TOP' | 'BOTTOM'\n  /**\n   * Tooltip display type\n   * @default 'SINGLE_LINE'\n   */\n  type?: 'MULTI_LINE' | 'SINGLE_LINE' | 'WITH_IMAGE'\n}\n\ninterface IconChipState {\n  isTooltipVisible: boolean\n}\n\nexport default class IconChip extends React.Component<IconChipProps, IconChipState> {\n  static defaultProps: Partial<IconChipProps> = {\n    pin: 'BOTTOM',\n    type: 'SINGLE_LINE',\n    iconName: 'adjust',\n  }\n\n  constructor(props: IconChipProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n    }\n  }\n\n  render() {\n    const { iconType, iconName, iconLetter, text, pin, type } = this.props\n    const { isTooltipVisible } = this.state\n\n    return (\n      <div\n        className={doClassnames(['icon-chip'])}\n        onMouseEnter={() => {\n          this.setState({ isTooltipVisible: true })\n        }}\n        onMouseLeave={() => this.setState({ isTooltipVisible: false })}\n        role=\"contentinfo\"\n      >\n        <Icon\n          type={iconType}\n          iconName={iconName}\n          iconLetter={iconLetter}\n        />\n        {isTooltipVisible && (\n          <Tooltip\n            pin={pin}\n            type={type}\n          >\n            {text}\n          </Tooltip>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["IconChip","React","props","iconType","iconName","iconLetter","text","pin","type","isTooltipVisible","jsxs","doClassnames","jsx","Icon","Tooltip"],"mappings":";;;;;AAyCA,MAAqBA,UAAiBC,EAAM,UAAwC;AAAA,EAClF,OAAO,eAAuC;AAAA,IAC5C,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAGZ,YAAYC,GAAsB;AAChC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,kBAAkB;AAAA,IAAA;AAAA,EAEtB;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,UAAAC,GAAU,UAAAC,GAAU,YAAAC,GAAY,MAAAC,GAAM,KAAAC,GAAK,MAAAC,MAAS,KAAK,OAC3D,EAAE,kBAAAC,MAAqB,KAAK;AAElC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa,CAAC,WAAW,CAAC;AAAA,QACrC,cAAc,MAAM;AAClB,eAAK,SAAS,EAAE,kBAAkB,GAAA,CAAM;AAAA,QAC1C;AAAA,QACA,cAAc,MAAM,KAAK,SAAS,EAAE,kBAAkB,IAAO;AAAA,QAC7D,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMV;AAAA,cACN,UAAAC;AAAA,cACA,YAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDI,KACC,gBAAAG;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,KAAAP;AAAA,cACA,MAAAC;AAAA,cAEC,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"IconChip.js","sources":["../../../../src/components/tags/icon-chip/IconChip.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport { IconList } from '@tps/icon.types'\nimport Icon from '@components/assets/icon/Icon'\nimport Tooltip from '../tooltip/Tooltip'\nimport './icon-chip.scss'\n\ninterface IconChipProps {\n  /**\n   * Type of icon\n   */\n  iconType: 'PICTO' | 'LETTER'\n  /**\n   * Icon name (when type is PICTO)\n   * @default 'adjust'\n   */\n  iconName?: IconList\n  /**\n   * Letter to display (when type is LETTER)\n   */\n  iconLetter?: string\n  /**\n   * Tooltip text content\n   */\n  text: string | React.ReactNode\n  /**\n   * Tooltip position\n   * @default 'BOTTOM'\n   */\n  pin?: 'TOP' | 'BOTTOM'\n  /**\n   * Tooltip display type\n   * @default 'SINGLE_LINE'\n   */\n  type?: 'MULTI_LINE' | 'SINGLE_LINE' | 'WITH_IMAGE'\n}\n\ninterface IconChipState {\n  isTooltipVisible: boolean\n}\n\nexport default class IconChip extends React.Component<\n  IconChipProps,\n  IconChipState\n> {\n  static defaultProps: Partial<IconChipProps> = {\n    pin: 'BOTTOM',\n    type: 'SINGLE_LINE',\n    iconName: 'adjust',\n  }\n\n  constructor(props: IconChipProps) {\n    super(props)\n    this.state = {\n      isTooltipVisible: false,\n    }\n  }\n\n  render() {\n    const { iconType, iconName, iconLetter, text, pin, type } = this.props\n    const { isTooltipVisible } = this.state\n\n    return (\n      <div\n        className={doClassnames(['icon-chip'])}\n        onMouseEnter={() => {\n          this.setState({ isTooltipVisible: true })\n        }}\n        onMouseLeave={() => this.setState({ isTooltipVisible: false })}\n        role=\"contentinfo\"\n      >\n        <Icon\n          type={iconType}\n          iconName={iconName}\n          iconLetter={iconLetter}\n        />\n        {isTooltipVisible && (\n          <Tooltip\n            pin={pin}\n            type={type}\n          >\n            {text}\n          </Tooltip>\n        )}\n      </div>\n    )\n  }\n}\n"],"names":["IconChip","React","props","iconType","iconName","iconLetter","text","pin","type","isTooltipVisible","jsxs","doClassnames","jsx","Icon","Tooltip"],"mappings":";;;;;AAyCA,MAAqBA,UAAiBC,EAAM,UAG1C;AAAA,EACA,OAAO,eAAuC;AAAA,IAC5C,KAAK;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAAA,EAGZ,YAAYC,GAAsB;AAChC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,kBAAkB;AAAA,IAAA;AAAA,EAEtB;AAAA,EAEA,SAAS;AACP,UAAM,EAAE,UAAAC,GAAU,UAAAC,GAAU,YAAAC,GAAY,MAAAC,GAAM,KAAAC,GAAK,MAAAC,MAAS,KAAK,OAC3D,EAAE,kBAAAC,MAAqB,KAAK;AAElC,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAa,CAAC,WAAW,CAAC;AAAA,QACrC,cAAc,MAAM;AAClB,eAAK,SAAS,EAAE,kBAAkB,GAAA,CAAM;AAAA,QAC1C;AAAA,QACA,cAAc,MAAM,KAAK,SAAS,EAAE,kBAAkB,IAAO;AAAA,QAC7D,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAMV;AAAA,cACN,UAAAC;AAAA,cACA,YAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDI,KACC,gBAAAG;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,KAAAP;AAAA,cACA,MAAAC;AAAA,cAEC,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/index.d.ts

@@ -2,11 +2,12 @@ import { default as sketchTypes } from './styles/tokens/modules/sketch-types.mod
 import { default as sketchColors } from './styles/tokens/modules/sketch-colors.module.scss';
 import { default as penpotTypes } from './styles/tokens/modules/penpot-types.module.scss';
 import { default as penpotColors } from './styles/tokens/modules/penpot-colors.module.scss';
-import { default as globals } from './styles/tokens/modules/globals.module.scss';
 import { default as framerTypes } from './styles/tokens/modules/framer-types.module.scss';
 import { default as framerColors } from './styles/tokens/modules/framer-colors.module.scss';
 import { default as figmaTypes } from './styles/tokens/modules/figma-types.module.scss';
+import { default as figmaPlugin } from './styles/tokens/modules/figma-plugin.module.scss';
 import { default as figmaColors } from './styles/tokens/modules/figma-colors.module.scss';
+import { default as commons } from './styles/tokens/modules/commons.module.scss';
 import { default as texts } from './styles/texts/texts.module.scss';
 import { default as layouts } from './styles/layouts.module.scss';
 import { default as icons } from './styles/icons/icons.module.scss';
@@ -57,5 +58,5 @@ export { iconList } from './types/icon.types';
 export type { IconList } from './types/icon.types';
 export type { ConsentConfiguration } from './types/consent.types';
 export type { DropdownOption } from './types/list.types';
-export { icons, layouts, texts, globals, figmaColors, figmaTypes, penpotColors, penpotTypes, sketchColors, sketchTypes, framerColors, framerTypes, };
+export { icons, layouts, texts, commons, figmaColors, figmaPlugin, figmaTypes, penpotColors, penpotTypes, sketchColors, sketchTypes, framerColors, framerTypes, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}