siam-ui-utils 3.0.7 → 3.0.9

package/dist/copy-link/styles.css

@@ -0,0 +1,38 @@
+.copy-link-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  position: relative;
+}
+
+.copy-link-text {
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-weight: 500;
+  color: #007bff;
+}
+.copy-link-text.copied {
+  color: #28a745;
+}
+
+.copy-link-btn {
+  padding: 0;
+  font-size: 16px;
+}
+
+.copy-link-copied {
+  color: #28a745;
+  font-size: 13px;
+  margin-left: 8px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  white-space: nowrap;
+}

package/dist/custom-input/CustomInputCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomInputCheckbox.js","sources":["../../src/custom-input/CustomInputCheckbox.jsx"],"sourcesContent":["import { FormGroup, Label, Input } from 'reactstrap';\r\nimport \"./index.css\";\r\n\r\nexport const CustomInputCheckbox = ({\r\n  className,\r\n  id,\r\n  checked,\r\n  children,\r\n  defaultChecked,\r\n  disabled,\r\n  key,\r\n  label,\r\n  onChange,\r\n}) => {\r\n  return (\r\n    <FormGroup check key={key} className=\"custom-checkbox\">\r\n      <Input\r\n        type=\"checkbox\"\r\n        id={`check_${id}`}\r\n        className={className}\r\n        checked={checked}\r\n        onChange={onChange}\r\n        defaultChecked={defaultChecked}\r\n        disabled={disabled}\r\n      />\r\n      <Label check htmlFor={`check_${id}`}>\r\n        {label}\r\n      </Label>\r\n      {children}\r\n    </FormGroup>\r\n  );\r\n};\r\nexport default CustomInputCheckbox;"],"names":[],"mappings":";;;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,qBAAC,WAAA,EAAU,OAAK,MAAW,WAAU,mBACnC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,EAAE;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,oBAAC,SAAM,OAAK,MAAC,SAAS,SAAS,EAAE,IAC9B,UAAA,MAAA,CACH;AAAA,IACC;AAAA,EAAA,EAAA,GAbmB,GActB;AAEJ;"}
+{"version":3,"file":"CustomInputCheckbox.js","sources":["../../src/custom-input/CustomInputCheckbox.jsx"],"sourcesContent":["import { FormGroup, Label, Input } from 'reactstrap';\r\nimport './index.css';\r\n\r\nexport const CustomInputCheckbox = ({\r\n  className,\r\n  id,\r\n  checked,\r\n  children,\r\n  defaultChecked,\r\n  disabled,\r\n  key,\r\n  label,\r\n  onChange,\r\n}) => {\r\n  return (\r\n    <FormGroup check key={key} className=\"custom-checkbox\">\r\n      <Input\r\n        type=\"checkbox\"\r\n        id={`check_${id}`}\r\n        className={className}\r\n        checked={checked}\r\n        onChange={onChange}\r\n        defaultChecked={defaultChecked}\r\n        disabled={disabled}\r\n      />\r\n      <Label check htmlFor={`check_${id}`}>\r\n        {label}\r\n      </Label>\r\n      {children}\r\n    </FormGroup>\r\n  );\r\n};\r\nexport default CustomInputCheckbox;\r\n"],"names":[],"mappings":";;;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,qBAAC,WAAA,EAAU,OAAK,MAAW,WAAU,mBACnC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,EAAE;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,oBAAC,SAAM,OAAK,MAAC,SAAS,SAAS,EAAE,IAC9B,UAAA,MAAA,CACH;AAAA,IACC;AAAA,EAAA,EAAA,GAbmB,GActB;AAEJ;"}

package/dist/custom-input/index.css

@@ -0,0 +1,166 @@
+/* Estilos para los checkbox personalizados */
+.custom-checkbox input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  z-index: -1;
+}
+
+.custom-checkbox input[type='checkbox'] + label {
+  position: relative;
+  padding-left: 2rem;
+  cursor: pointer;
+  line-height: 0px !important;
+}
+
+.custom-checkbox input[type='checkbox'] + label::before {
+  content: '';
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  background-color: white;
+  position: absolute;
+  left: 0;
+  top: -11px;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.custom-checkbox input[type='checkbox']:checked + label::before {
+  background-color: #900604;
+  border-color: #900604;
+}
+
+.custom-checkbox input[type='checkbox']:checked + label::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  left: 0.3rem;
+  width: 0.5rem;
+  height: 0.6rem;
+  border: solid white;
+  border-width: 0 0.2rem 0.2rem 0;
+  transform: rotate(45deg);
+}
+
+/* Estilos específicos para CheckMultiSelect */
+.check-multi-select
+  .custom-checkbox
+  input[type='checkbox']:not(:checked)
+  + label::before {
+  background-color: #900604; /* Fondo rojo en CheckMultiSelect para desmarcados */
+  border-color: #900604;
+}
+
+.check-multi-select
+  .custom-checkbox
+  input[type='checkbox']:not(:checked)
+  + label::after {
+  content: '';
+  position: absolute;
+  top: -0.29rem; /* Ajusta la posición del tilde */
+  left: 0.25rem;
+  width: 0.5rem;
+  height: 0.1rem;
+  background-color: white;
+}
+
+/* Estilos para checkboxes deshabilitados */
+.custom-checkbox input[type='checkbox']:disabled + label {
+  cursor: not-allowed; /* Cambia el cursor */
+  color: #6c757d;
+  line-height: 0px !important;
+}
+
+.custom-checkbox input[type='checkbox']:disabled + label::before {
+  background-color: #e9ecef;
+  border-color: #ced4da;
+}
+
+.custom-checkbox input[type='checkbox']:disabled:checked + label::before {
+  background-color: #adb5bd;
+  border-color: #adb5bd;
+}
+
+/* Estilos para los radio buttons personalizados */
+.custom-radio input[type='radio'] {
+  position: absolute;
+  opacity: 0;
+}
+
+.custom-radio label {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.custom-radio label::before {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #ced4da;
+  background-color: white;
+  margin-right: 10px;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.custom-radio input[type='radio']:checked + label::before {
+  background-color: #900604;
+  border-color: #900604;
+}
+
+.custom-radio input[type='radio']:checked + label::after {
+  content: '';
+  position: absolute;
+  left: 26px;
+  top: 44%;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.45rem;
+  background-color: white !important;
+  border-radius: 50%;
+}
+
+/* Estilos específicos para radio buttons deshabilitados */
+.custom-radio input[type='radio']:disabled + label {
+  cursor: not-allowed; /* Cambia el cursor */
+  color: #6c757d; /* Color gris */
+}
+
+.custom-radio input[type='radio']:disabled + label::before {
+  background-color: #e9ecef; /* Fondo gris claro */
+  border-color: #ced4da; /* Borde gris claro */
+}
+
+.custom-radio input[type='radio']:disabled:checked + label::before {
+  background-color: #adb5bd; /* Fondo gris más oscuro para el estado checked */
+  border-color: #adb5bd; /* Borde gris más oscuro */
+}
+
+/* Estilos para el custom file */
+.custom-file {
+  height: calc(2.5rem + 2px);
+}
+
+.custom-file-label:focus,
+.custom-file-input:focus {
+  border-color: #900604;
+}
+
+.custom-file-label::after {
+  height: calc(2.5rem + 2px - 2px);
+  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+  background: #900604;
+  color: white; /* Ajustado para contraste */
+  border-color: #900604;
+}
+
+.custom-file-input:focus ~ .custom-file-label {
+  border-color: rgba(144, 6, 4, 0.6);
+}
+
+.custom-file-input {
+  box-shadow: initial !important;
+}

package/dist/custom-input/index.js

@@ -2,10 +2,12 @@ import { CustomInputCheckbox } from "./CustomInputCheckbox.js";
 import { CustomInputRadio } from "./CustomInputRadio.js";
 import { CustomInputFile } from "./CustomInputFile.js";
 import { CustomInputCurrency } from "./CustomInputCurrency.js";
+import { CustomMultiSelect } from "./multi-select/index.js";
 export {
   CustomInputCheckbox,
   CustomInputCurrency,
   CustomInputFile,
-  CustomInputRadio
+  CustomInputRadio,
+  CustomMultiSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/custom-input/index.js.map

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

package/dist/custom-input/multi-select/badge-label-multi-select.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { toCamelCase } from "siam-utils";
+import { ClickableBadge } from "./styled-component.js";
+const BadgeLabelMultiSelect = ({
+  descripcionLabel = [],
+  onRemove = () => {
+  }
+}) => {
+  const getBadgeColor = (value) => {
+    return value.color || "dark";
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: descripcionLabel.map((item) => /* @__PURE__ */ jsxs(
+    ClickableBadge,
+    {
+      color: getBadgeColor(item),
+      pill: true,
+      onClick: () => onRemove(item.value),
+      children: [
+        toCamelCase(item.label),
+        " ×"
+      ]
+    },
+    item.value
+  )) });
+};
+export {
+  BadgeLabelMultiSelect as default
+};
+//# sourceMappingURL=badge-label-multi-select.js.map

package/dist/custom-input/multi-select/badge-label-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-label-multi-select.js","sources":["../../../src/custom-input/multi-select/badge-label-multi-select.jsx"],"sourcesContent":["import { toCamelCase } from 'siam-utils';\r\nimport { ClickableBadge } from './styled-component';\r\n\r\nconst BadgeLabelMultiSelect = ({\r\n  descripcionLabel = [],\r\n  onRemove = () => {},\r\n}) => {\r\n  const getBadgeColor = (value) => {\r\n    return value.color || 'dark';\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {descripcionLabel.map((item) => (\r\n        <ClickableBadge\r\n          key={item.value}\r\n          color={getBadgeColor(item)}\r\n          pill\r\n          onClick={() => onRemove(item.value)}\r\n        >\r\n          {toCamelCase(item.label)} &times;\r\n        </ClickableBadge>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default BadgeLabelMultiSelect;\r\n"],"names":[],"mappings":";;;AAGA,MAAM,wBAAwB,CAAC;AAAA,EAC7B,mBAAmB,CAAA;AAAA,EACnB,WAAW,MAAM;AAAA,EAAC;AACpB,MAAM;AACJ,QAAM,gBAAgB,CAAC,UAAU;AAC/B,WAAO,MAAM,SAAS;AAAA,EACxB;AAEA,SACE,oBAAA,UAAA,EACG,UAAA,iBAAiB,IAAI,CAAC,SACrB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,OAAO,cAAc,IAAI;AAAA,MACzB,MAAI;AAAA,MACJ,SAAS,MAAM,SAAS,KAAK,KAAK;AAAA,MAEjC,UAAA;AAAA,QAAA,YAAY,KAAK,KAAK;AAAA,QAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IALpB,KAAK;AAAA,EAAA,CAOb,GACH;AAEJ;"}

package/dist/custom-input/multi-select/index.css

@@ -0,0 +1,24 @@
+.rmsc input[type=checkbox] {
+  accent-color: #900604;
+}
+
+.rmsc .item:hover {
+  background-color: #f8e1e1;
+}
+
+.rmsc input[type=checkbox]:focus {
+  outline: 2px solid #900604;
+  outline-offset: 2px;
+}
+
+.custom-multiselect .dropdown-container {
+  min-height: 38px;
+}
+
+.dropdown-heading-value {
+  color: green;
+  height: 2rem;
+  display: inline;
+  font-weight: bold;
+  padding: 0.4rem;
+}

package/dist/custom-input/multi-select/index.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { MultiSelect as je } from "../../node_modules/react-multi-select-component/dist/esm/index.js";
+import { Row, Col } from "reactstrap";
+import BadgeLabelMultiSelect from "./badge-label-multi-select.js";
+import { BadgeWrapper, ClickableBadge } from "./styled-component.js";
+/* empty css           */
+const CustomMultiSelect = ({
+  lista = [],
+  onListaUpdate = () => {
+  },
+  value = []
+}) => {
+  const [selected, setSelected] = useState([]);
+  const overrideStringsCustom = {
+    selectSomeItems: "Seleccionar Estado/s",
+    allItemsAreSelected: "Todos Seleccionados",
+    search: "Buscar...",
+    selectAll: "SELECCIONAR TODOS"
+  };
+  useEffect(() => {
+    if (value.length) {
+      setSelected(value);
+    }
+  }, [value]);
+  const handleCheckChange = (selectedOptions) => {
+    if (selectedOptions) {
+      setSelected(selectedOptions);
+      onListaUpdate(selectedOptions);
+    }
+  };
+  const handleRemoveBadge = (valueToRemove) => {
+    const updated = selected.filter((item) => item.value !== valueToRemove);
+    setSelected(updated);
+    onListaUpdate(updated);
+  };
+  return /* @__PURE__ */ jsxs(Row, { className: "align-items-center", children: [
+    /* @__PURE__ */ jsx(Col, { xs: 6, style: { marginTop: "3.5rem" }, children: /* @__PURE__ */ jsx(
+      je,
+      {
+        options: lista,
+        value: selected,
+        onChange: handleCheckChange,
+        labelledBy: "Seleccionar",
+        className: "custom-multiselect",
+        overrideStrings: overrideStringsCustom
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Col, { xs: 6, style: { marginTop: "0.5rem" }, children: selected.length > 0 && /* @__PURE__ */ jsx(BadgeWrapper, { children: selected.length === lista.length ? /* @__PURE__ */ jsx(ClickableBadge, { color: "info", pill: true, children: "Todos" }) : /* @__PURE__ */ jsx(
+      BadgeLabelMultiSelect,
+      {
+        descripcionLabel: selected,
+        onRemove: handleRemoveBadge
+      }
+    ) }) })
+  ] });
+};
+export {
+  CustomMultiSelect,
+  CustomMultiSelect as default
+};
+//# sourceMappingURL=index.js.map

package/dist/custom-input/multi-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/custom-input/multi-select/index.jsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { MultiSelect } from 'react-multi-select-component';\r\nimport { Col, Row } from 'reactstrap';\r\nimport BadgeLabelMultiSelect from './badge-label-multi-select';\r\nimport { BadgeWrapper, ClickableBadge } from './styled-component';\r\nimport './index.scss';\r\n\r\nexport const CustomMultiSelect = ({\r\n  lista = [],\r\n  onListaUpdate = () => {},\r\n  value = [],\r\n}) => {\r\n  const [selected, setSelected] = useState([]);\r\n  const overrideStringsCustom = {\r\n    selectSomeItems: 'Seleccionar Estado/s',\r\n    allItemsAreSelected: 'Todos Seleccionados',\r\n    search: 'Buscar...',\r\n    selectAll: 'SELECCIONAR TODOS',\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (value.length) {\r\n      setSelected(value);\r\n    }\r\n  }, [value]);\r\n\r\n  const handleCheckChange = (selectedOptions) => {\r\n    if (selectedOptions) {\r\n      setSelected(selectedOptions);\r\n      onListaUpdate(selectedOptions);\r\n    }\r\n  };\r\n\r\n  const handleRemoveBadge = (valueToRemove) => {\r\n    const updated = selected.filter((item) => item.value !== valueToRemove);\r\n    setSelected(updated);\r\n    onListaUpdate(updated);\r\n  };\r\n\r\n  return (\r\n    <Row className=\"align-items-center\">\r\n      <Col xs={6} style={{ marginTop: '3.5rem' }}>\r\n        <MultiSelect\r\n          options={lista}\r\n          value={selected}\r\n          onChange={handleCheckChange}\r\n          labelledBy=\"Seleccionar\"\r\n          className=\"custom-multiselect\"\r\n          overrideStrings={overrideStringsCustom}\r\n        />\r\n      </Col>\r\n      <Col xs={6} style={{ marginTop: '0.5rem' }}>\r\n        {selected.length > 0 && (\r\n          <BadgeWrapper>\r\n            {selected.length === lista.length ? (\r\n              <ClickableBadge color=\"info\" pill>\r\n                Todos\r\n              </ClickableBadge>\r\n            ) : (\r\n              <BadgeLabelMultiSelect\r\n                descripcionLabel={selected}\r\n                onRemove={handleRemoveBadge}\r\n              />\r\n            )}\r\n          </BadgeWrapper>\r\n        )}\r\n      </Col>\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default CustomMultiSelect;\r\n"],"names":["MultiSelect"],"mappings":";;;;;;;AAOO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAQ,CAAA;AAAA,EACR,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,QAAQ,CAAA;AACV,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAA,CAAE;AAC3C,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAGb,YAAU,MAAM;AACd,QAAI,MAAM,QAAQ;AAChB,kBAAY,KAAK;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,oBAAoB,CAAC,oBAAoB;AAC7C,QAAI,iBAAiB;AACnB,kBAAY,eAAe;AAC3B,oBAAc,eAAe;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,oBAAoB,CAAC,kBAAkB;AAC3C,UAAM,UAAU,SAAS,OAAO,CAAC,SAAS,KAAK,UAAU,aAAa;AACtE,gBAAY,OAAO;AACnB,kBAAc,OAAO;AAAA,EACvB;AAEA,SACE,qBAAC,KAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,oBAAC,OAAI,IAAI,GAAG,OAAO,EAAE,WAAW,YAC9B,UAAA;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAU;AAAA,QACV,iBAAiB;AAAA,MAAA;AAAA,IAAA,GAErB;AAAA,IACA,oBAAC,KAAA,EAAI,IAAI,GAAG,OAAO,EAAE,WAAW,SAAA,GAC7B,UAAA,SAAS,SAAS,yBAChB,cAAA,EACE,UAAA,SAAS,WAAW,MAAM,SACzB,oBAAC,gBAAA,EAAe,OAAM,QAAO,MAAI,MAAC,UAAA,QAAA,CAElC,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,UAAU;AAAA,MAAA;AAAA,IAAA,GAGhB,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/custom-input/multi-select/styled-component.js

@@ -0,0 +1,24 @@
+import { Badge } from "reactstrap";
+import styled from "styled-components";
+const ClickableBadge = styled(Badge)`
+  cursor: pointer;
+  width: fit-content;
+  white-space: nowrap;
+`;
+const BadgeWrapper = styled.div`
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 10px;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  margin-top: 2.8rem;
+  max-width: 120%;
+  overflow-x: auto;
+`;
+export {
+  BadgeWrapper,
+  ClickableBadge
+};
+//# sourceMappingURL=styled-component.js.map

package/dist/custom-input/multi-select/styled-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled-component.js","sources":["../../../src/custom-input/multi-select/styled-component.js"],"sourcesContent":["import { Badge } from 'reactstrap';\r\nimport styled from 'styled-components';\r\n\r\nexport const ClickableBadge = styled(Badge)`\r\n  cursor: pointer;\r\n  width: fit-content;\r\n  white-space: nowrap;\r\n`;\r\n\r\nexport const BadgeWrapper = styled.div`\r\n  display: inline-flex;\r\n  flex-wrap: nowrap;\r\n  gap: 10px;\r\n  padding: 0.5rem;\r\n  border-radius: 0.5rem;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #ccc;\r\n  margin-top: 2.8rem;\r\n  max-width: 120%;\r\n  overflow-x: auto;\r\n`;\r\n"],"names":[],"mappings":";;AAGY,MAAC,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAC,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/dropzone/styles.css

@@ -0,0 +1,140 @@
+.dzu-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 120px;
+  overflow: scroll;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  transition: all .15s linear;
+  border: 2px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.dzu-dropzoneActive {
+  background-color: #DEEBFF;
+  border-color: #2484FF;
+}
+
+.dzu-dropzoneDisabled {
+  opacity: 0.5;
+}
+
+.dzu-dropzoneDisabled *:hover {
+  cursor: unset;
+}
+
+.dzu-input {
+  display: none;
+}
+
+.dzu-inputLabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: #2484FF;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-inputLabelWithFiles {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #E6E6E6;
+  color: #2484FF;
+  border: none;
+  font-family: 'Helvetica', sans-serif;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-left: 3%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-previewContainer {
+  padding: 40px 3%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ECECEC;
+  box-sizing: border-box;
+}
+
+.dzu-previewStatusContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dzu-previewFileName {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+}
+
+.dzu-previewImage {
+  width: auto;
+  max-height: 40px;
+  max-width: 140px;
+  border-radius: 4px;
+}
+
+.dzu-previewButton {
+  background-size: 14px 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  margin: 0 0 2px 10px;
+}
+
+.dzu-submitButtonContainer {
+  margin: 24px 0;
+  z-index: 1;
+}
+
+.dzu-submitButton {
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #2484FF;
+  border: none;
+  border-radius: 4px;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFF;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-submitButton:disabled {
+  background-color: #E6E6E6;
+  color: #333333;
+  cursor: unset;
+}

package/dist/dropzone-uploader/dropzone-uploader.css

@@ -0,0 +1,66 @@
+.dropzone-upload-button{
+  padding: 25; 
+  border-radius: 5px !important;
+  cursor: pointer;
+  color: #fff;
+  width: 10rem !important;
+  height: 2rem !important;
+  line-height: 1.5 !important;
+  font-size: 13px;
+  text-align: center;
+  vertical-align: middle !important;
+  border: none;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+  background-color: #af251b;
+  &:hover {
+    background-color: rgb(108, 31, 1);
+  }
+}
+.dropzone-upload-frame{
+  border: 0px !important;
+  overflow: 'none' !important;
+}
+.dropzone-upload-previewContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100px;
+    min-height: 60px;
+    z-index: 1;
+    border-bottom: 1px solid #ECECEC;
+    box-sizing: border-box;
+}
+
+.dropzone-upload-previewImage {
+    width: 60rem;
+    max-height: 60px;
+    max-width: 10rem;
+    border-radius: 4px;
+    padding-right: 1rem;
+}
+ 
+.dropzone-upload-delete-btn {
+  width: 2rem;
+  line-height: 1.5; 
+  border : 0;
+  color: #ff0000;
+  background-color: #f8f8f8;
+  padding-right:1rem;
+}
+
+.dropzone-upload-file-name-container {
+  position: relative;
+  display: inline-block;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}
+
+.dropzone-upload-file-name {
+  padding-right: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}