intelicoreact 2.0.18 → 2.0.20

package/dist/es/Atomic/FormElements/Dropdown/Dropdown.styles.css

@@ -0,0 +1,529 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.dropdown {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #e2e5ec;
+  border-radius: 4px;
+  background: #fff;
+}
+.dropdown--focused {
+  border-color: #6b81dd;
+  filter: drop-shadow(0 0 4px rgba(93, 120, 255, 0.5));
+}
+.dropdown--with-custom-trigger {
+  border: none !important;
+  background: none !important;
+  filter: none !important;
+}
+.dropdown--with-actions {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.dropdown__actions {
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  min-width: 56px;
+  border-radius: 0px 2px 2px 0px;
+}
+.dropdown__actions-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 4px;
+  box-sizing: border-box;
+  min-width: 28px;
+  height: 100%;
+  padding: 4px;
+  cursor: pointer;
+  border-left: 1px solid var(--Border-Input, #e2e5ec);
+  background: var(--Background-Light-action, #f4f6ff);
+}
+.dropdown__actions svg {
+  width: 16px;
+  height: 16px;
+  color: #1e1e2d;
+}
+.dropdown__container {
+  position: fixed;
+  z-index: 99999;
+  display: block;
+  box-sizing: border-box;
+}
+.dropdown__trigger {
+  position: relative;
+  display: block;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 28px;
+  font-weight: 400;
+  cursor: pointer;
+  text-align: left;
+  border: none !important;
+  filter: none;
+}
+.dropdown__trigger .text {
+  overflow: hidden;
+  max-width: calc(100% - 5px);
+  padding: 0 16px 0 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.dropdown__trigger.error {
+  border-color: #f06d8d;
+}
+.dropdown__trigger.placeholder .text {
+  opacity: 0.7;
+}
+.dropdown__trigger input {
+  box-sizing: border-box;
+}
+.dropdown__input {
+  width: 100%;
+  height: 16px;
+  padding: 0 16px 0 8px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  border: none;
+  background: none;
+}
+.dropdown__list {
+  position: relative;
+  z-index: 6;
+  top: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  min-width: 100%;
+  max-height: 320px;
+  padding: 4px 0;
+}
+.dropdown__list-wrapper {
+  position: relative;
+  z-index: 6;
+  top: 100%;
+  box-sizing: border-box;
+  margin-top: 4px;
+  border: 1px solid #e2e5ec;
+  background: #fff;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
+}
+.dropdown__list-header {
+  display: none;
+}
+.dropdown__list::-webkit-scrollbar {
+  width: 4px;
+}
+.dropdown__list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dropdown__list::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: #9aa0b9;
+}
+.dropdown__list-top {
+  top: auto;
+  bottom: calc(100% + 4px);
+  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
+}
+.dropdown__list-item {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  width: 100%;
+  min-height: 24px;
+  padding: 0 20px 0 30px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: #1e1e2d;
+  border: none;
+  background: transparent;
+}
+.dropdown__list-item-label {
+  text-align: left;
+  white-space: wrap;
+}
+.dropdown__list-item-description {
+  margin-left: 4px;
+  color: #757f8c;
+}
+.dropdown__list-item--modal {
+  position: relative;
+  width: 100%;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  letter-spacing: 0.2px;
+  color: #1f7499;
+}
+.dropdown__list-item--modal::after {
+  position: absolute;
+  bottom: -2px;
+  width: 300%;
+  height: 1px;
+  content: "";
+  background-color: #e8e9ec;
+  transform: translateX(-50%);
+}
+.dropdown__list-item--no-options {
+  box-sizing: border-box;
+}
+.dropdown__list-item:hover, .dropdown__list-item_active {
+  background: #f2f2f8;
+}
+.dropdown__list-item_disabled {
+  pointer-events: none;
+  opacity: 0.3;
+}
+.dropdown__list-item-postfix {
+  margin-left: 4px;
+}
+.dropdown__list--with-label {
+  top: 45px;
+}
+.dropdown__arrow {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  transform: translate(0, -50%);
+}
+.dropdown__arrow svg {
+  width: 16px;
+  height: 16px;
+}
+.dropdown__active-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  display: none;
+  align-items: center;
+  margin: auto;
+}
+.dropdown__active-icon_active {
+  display: flex;
+}
+.dropdown__active-icon_active svg {
+  width: 16px;
+  height: 16px;
+}
+.dropdown-group {
+  margin-top: 10px;
+}
+.dropdown-group__name {
+  margin-bottom: 6px;
+  margin-left: 17px;
+  font-size: 10px;
+  text-transform: uppercase;
+  color: #9aa0b9;
+}
+.dropdown-label {
+  margin-bottom: 4px;
+}
+.dropdown__error {
+  position: absolute;
+  top: 50px;
+  left: 2px;
+  display: block;
+  font-size: 10px;
+  color: #f06d8d;
+}
+.dropdown__footer {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  padding: 4px 32px 6px;
+  background: #f8fbff;
+}
+.dropdown.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (max-width: 768px), screen and (max-width: 1024px) and (orientation: landscape) {
+  .dropdown-mobile .dropdown__arrow {
+    top: 50% !important;
+    right: 16px !important;
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    transform: translateY(-50%) rotate(90deg) !important;
+  }
+  .dropdown-mobile .dropdown__arrow svg.mobile-icon {
+    position: relative !important;
+    top: 5px !important;
+    right: unset !important;
+    display: flex;
+    height: 12px;
+  }
+  .dropdown-mobile .dropdown__container {
+    overflow: hidden !important;
+  }
+  .dropdown-mobile .dropdown__container--opened {
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    background: rgba(23, 29, 51, 0.5);
+    animation-name: fadeIn;
+    animation-duration: 0.25s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+  }
+  .dropdown-mobile .dropdown__container-wrapper {
+    position: fixed;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: hidden !important;
+    box-sizing: border-box;
+    width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    padding: 8px;
+    animation-name: slideup;
+    animation-duration: 0.4s;
+  }
+  .dropdown-mobile .dropdown__list {
+    top: 0;
+    padding: 16px !important;
+  }
+  .dropdown-mobile .dropdown__list-wrapper {
+    position: sticky;
+    bottom: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    max-height: 500px;
+    border-radius: 24px !important;
+  }
+  .dropdown-mobile .dropdown__list-wrapper--with-bottom-shadow::after {
+    position: absolute;
+    z-index: 6;
+    bottom: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+    transform: rotate(180deg);
+  }
+  .dropdown-mobile .dropdown__list-wrapper--with-bottom-shadow-hidden::after {
+    opacity: 0;
+  }
+  .dropdown-mobile .dropdown__list-wrapper--fixed-height {
+    height: 500px !important;
+  }
+  .dropdown-mobile .dropdown__list-header {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #3b414b;
+  }
+  .dropdown-mobile .dropdown__list-header-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 24px;
+  }
+  .dropdown-mobile .dropdown__list-header-row:first-child {
+    padding-right: 50px;
+  }
+  .dropdown-mobile .dropdown__list-header-row .input__wrap {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-right: 8px;
+    border: 1px solid var(--form-input-border, #e1e8f1);
+    border-radius: 6px;
+    background: var(--black-bg-color, #f8fbff) !important;
+  }
+  .dropdown-mobile .dropdown__list-header-row .input__wrap input {
+    background: unset !important;
+  }
+  .dropdown-mobile .dropdown__list-header-row .input__close {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    padding: 4px;
+    border-radius: 2px;
+    background: var(--bg-gray-box, #f0f1f4);
+  }
+  .dropdown-mobile .dropdown__list-header-row .input__close::before, .dropdown-mobile .dropdown__list-header-row .input__close::after {
+    top: 50%;
+    height: 12px;
+    border-radius: 8px;
+    background-color: #171d33;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  .dropdown-mobile .dropdown__list-header-row .input__close::after {
+    transform: translateY(-50%) rotate(-45deg);
+  }
+  .dropdown-mobile .dropdown__list-header-with-shadow::after {
+    position: absolute;
+    z-index: 10;
+    bottom: -15px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+  }
+  .dropdown-mobile .dropdown__list-header-with-shadow-hidden::after {
+    opacity: 0;
+  }
+  .dropdown-mobile .dropdown__list-close-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    padding: 16px;
+  }
+  .dropdown-mobile .dropdown__list-close-icon svg {
+    width: 16px;
+    height: 16px;
+    color: #a0a4b0;
+  }
+  .dropdown-mobile .dropdown-group {
+    margin: 0 0 4px;
+  }
+  .dropdown-mobile .dropdown-group:last-child {
+    margin-bottom: 16px;
+  }
+  .dropdown-mobile .dropdown-group__name {
+    margin: 0 0 8px;
+    padding: 10px 0px 6px;
+    font-size: 11px;
+    border-bottom: 1px solid rgba(58, 72, 122, 0.15);
+  }
+  .dropdown-mobile .dropdown__list-item {
+    display: flex;
+    justify-content: space-between;
+    height: auto !important;
+    padding: 10px 8px !important;
+    line-height: 24px;
+  }
+  .dropdown-mobile .dropdown__list-item-label {
+    white-space: wrap !important;
+  }
+  .dropdown-mobile .dropdown__list-item-label span.bg--yellow {
+    font-weight: 600;
+    background-color: unset !important;
+  }
+  .dropdown-mobile .dropdown__list-item_active {
+    border-radius: 6px;
+    background: var(--bg-gray-box, #f0f1f4) !important;
+  }
+  .dropdown-mobile .dropdown__footer {
+    position: absolute;
+    z-index: 4;
+    bottom: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    height: unset;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+  .dropdown-mobile .dropdown__footer-with-shadow::after {
+    position: absolute;
+    top: -15px;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+    transform: rotate(180deg);
+  }
+  .dropdown-mobile .dropdown__footer-with-shadow-hidden::after {
+    opacity: 0;
+  }
+  .dropdown-mobile .dropdown__footer button {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px 16px;
+  }
+}

package/dist/es/Atomic/FormElements/Dropdown/_utils.js

@@ -0,0 +1,68 @@
+import { compareAlphabetical } from "../../../Functions/utils.js";
+//#region src/Atomic/FormElements/Dropdown/_utils.ts
+function getTotalOptions(options) {
+	return options?.reduce((result, item) => {
+		if (item?.list || item?.items) result += item?.list?.length || item?.items?.length || 0;
+		else ++result;
+		return result;
+	}, 0) ?? 0;
+}
+function moveOtherToEnd(options) {
+	const otherIndex = options?.findIndex((option) => option?.value === "other");
+	if (otherIndex > -1) {
+		const other = options?.splice(otherIndex, 1);
+		options.push(...other);
+	}
+	return options.map((option) => {
+		if (option.items) {
+			option.items = moveOtherToEnd(option.items);
+			return option;
+		} else return option;
+	});
+}
+function getListContainer(dropdownId) {
+	return document.getElementById(dropdownId);
+}
+function getListContainerWrapper(dropdownId) {
+	return document.getElementById(`mlw-${dropdownId}`);
+}
+function getParentNode(dropdownRef, isDoNotPullOutListOfMainContainer) {
+	if (isDoNotPullOutListOfMainContainer) return dropdownRef.current;
+	return document.querySelector("div#root") ?? document.querySelector("div#app") ?? document.querySelector("div#storybook-root");
+}
+function getPreparedOptionLabel(searchValue, text, isSearchable, postfix, description) {
+	const prepare = (text) => text?.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+	text = text?.replace(/["&<>]/g, (a) => {
+		return {
+			"\"": "&quot;",
+			"&": "&amp;",
+			"<": "&lt;",
+			">": "&gt;"
+		}[a] ?? "";
+	});
+	const main = isSearchable && searchValue ? text?.replace(new RegExp(prepare(searchValue?.toString()), "i"), (match) => `<span class="bg--yellow">${match}</span>`) : text;
+	const postfixPart = postfix ? `<span class="dropdown__list-item-postfix">${postfix}</span>` : "";
+	const descriptionPart = description ? `<span class="dropdown__list-item-description">${description}</span>` : "";
+	return main + postfixPart + descriptionPart;
+}
+function getSortedOptions(data, sortAlphabetical = false) {
+	let newData = [...data];
+	if (sortAlphabetical) {
+		const openModalOption = newData.filter(({ value }) => value === "open_modal");
+		const emptyOption = newData.filter(({ value }) => value === "");
+		const restOfOptions = newData.filter(({ value }) => value !== "open_modal" && value !== "").sort(compareAlphabetical);
+		newData = [
+			...openModalOption,
+			...emptyOption,
+			...restOfOptions
+		].map((item) => {
+			if (item?.items) item.items = [...item.items].sort(compareAlphabetical);
+			return item;
+		});
+	}
+	return newData;
+}
+//#endregion
+export { getListContainer, getListContainerWrapper, getParentNode, getPreparedOptionLabel, getSortedOptions, getTotalOptions, moveOtherToEnd };
+
+//# sourceMappingURL=_utils.js.map

package/dist/es/Atomic/FormElements/Dropdown/_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_utils.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Dropdown/_utils.ts"],"sourcesContent":["import type { IDropdownOption } from './Dropdown.interface';\nimport { compareAlphabetical } from '../../../Functions/utils';\n\nexport function getTotalOptions(options: IDropdownOption[]): number {\n  return options?.reduce((result, item) => {\n    if (item?.list || item?.items) {\n      result += item?.list?.length || item?.items?.length || 0;\n    }\n    else {\n      ++result;\n    }\n\n    return result;\n  }, 0) ?? 0;\n}\n\nexport function moveOtherToEnd(options: IDropdownOption[]): IDropdownOption[] {\n  const otherIndex = options?.findIndex(\n    option => option?.value === 'other',\n  );\n  if (otherIndex > -1) {\n    const other = options?.splice(otherIndex, 1);\n    options.push(...other);\n  }\n\n  return options.map((option: IDropdownOption) => {\n    if (option.items) {\n      option.items = moveOtherToEnd(option.items);\n      return option;\n    }\n    else {\n      return option;\n    }\n  });\n}\n\nexport function getListContainer(dropdownId: string): HTMLElement | null {\n  return document.getElementById(dropdownId);\n}\n\nexport function getListContainerWrapper(dropdownId: string): Element | null {\n  return document.getElementById(`mlw-${dropdownId}`);\n}\n\nexport function getParentNode(dropdownRef: React.MutableRefObject<Element | null>, isDoNotPullOutListOfMainContainer?: boolean): Element | null {\n  if (isDoNotPullOutListOfMainContainer) return dropdownRef.current;\n  return (\n    document.querySelector('div#root')\n    ?? document.querySelector('div#app')\n    ?? document.querySelector('div#storybook-root')\n  );\n}\n\nexport function getPreparedOptionLabel(searchValue: string | null | undefined, text: string, isSearchable?: boolean, postfix?: string, description?: string): string {\n  const prepare = (text: string): string => text?.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&');\n  text = text?.replace(/[\"&<>]/g, (a) => {\n    return { '\"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a] ?? '';\n  });\n  const main\n    = isSearchable && searchValue\n      ? text?.replace(\n\n        new RegExp(prepare(searchValue?.toString()), 'i'),\n        match => `<span class=\"bg--yellow\">${match}</span>`,\n      )\n      : text;\n  const postfixPart = postfix\n    ? `<span class=\"dropdown__list-item-postfix\">${postfix}</span>`\n    : '';\n  const descriptionPart = description\n    ? `<span class=\"dropdown__list-item-description\">${description}</span>`\n    : '';\n  return main + postfixPart + descriptionPart;\n}\n\nexport function getSortedOptions(data: IDropdownOption[], sortAlphabetical: boolean = false): IDropdownOption[] {\n  let newData = [...data];\n\n  if (sortAlphabetical) {\n    const openModalOption = newData.filter(\n      ({ value }) => value === 'open_modal',\n    );\n    const emptyOption = newData.filter(({ value }) => value === '');\n    const restOfOptions = newData\n      .filter(({ value }) => value !== 'open_modal' && value !== '')\n      .sort(compareAlphabetical);\n\n    newData = [...openModalOption, ...emptyOption, ...restOfOptions].map(\n      (item) => {\n        if (item?.items) {\n          item.items = [...item.items].sort(compareAlphabetical);\n        }\n\n        return item;\n      },\n    );\n  }\n\n  return newData;\n}\n"],"mappings":";;AAGA,SAAgB,gBAAgB,SAAoC;CAClE,OAAO,SAAS,QAAQ,QAAQ,SAAS;EACvC,IAAI,MAAM,QAAQ,MAAM,OACtB,UAAU,MAAM,MAAM,UAAU,MAAM,OAAO,UAAU;OAGvD,EAAE;EAGJ,OAAO;CACT,GAAG,CAAC,KAAK;AACX;AAEA,SAAgB,eAAe,SAA+C;CAC5E,MAAM,aAAa,SAAS,WAC1B,WAAU,QAAQ,UAAU,OAC9B;CACA,IAAI,aAAa,IAAI;EACnB,MAAM,QAAQ,SAAS,OAAO,YAAY,CAAC;EAC3C,QAAQ,KAAK,GAAG,KAAK;CACvB;CAEA,OAAO,QAAQ,KAAK,WAA4B;EAC9C,IAAI,OAAO,OAAO;GAChB,OAAO,QAAQ,eAAe,OAAO,KAAK;GAC1C,OAAO;EACT,OAEE,OAAO;CAEX,CAAC;AACH;AAEA,SAAgB,iBAAiB,YAAwC;CACvE,OAAO,SAAS,eAAe,UAAU;AAC3C;AAEA,SAAgB,wBAAwB,YAAoC;CAC1E,OAAO,SAAS,eAAe,OAAO,YAAY;AACpD;AAEA,SAAgB,cAAc,aAAqD,mCAA6D;CAC9I,IAAI,mCAAmC,OAAO,YAAY;CAC1D,OACE,SAAS,cAAc,UAAU,KAC9B,SAAS,cAAc,SAAS,KAChC,SAAS,cAAc,oBAAoB;AAElD;AAEA,SAAgB,uBAAuB,aAAwC,MAAc,cAAwB,SAAkB,aAA8B;CACnK,MAAM,WAAW,SAAyB,MAAM,QAAQ,uBAAuB,MAAM;CACrF,OAAO,MAAM,QAAQ,YAAY,MAAM;EACrC,OAAO;GAAE,MAAK;GAAU,KAAK;GAAS,KAAK;GAAQ,KAAK;EAAO,EAAE,MAAM;CACzE,CAAC;CACD,MAAM,OACF,gBAAgB,cACd,MAAM,QAEN,IAAI,OAAO,QAAQ,aAAa,SAAS,CAAC,GAAG,GAAG,IAChD,UAAS,4BAA4B,MAAM,QAC7C,IACE;CACN,MAAM,cAAc,UAChB,6CAA6C,QAAQ,WACrD;CACJ,MAAM,kBAAkB,cACpB,iDAAiD,YAAY,WAC7D;CACJ,OAAO,OAAO,cAAc;AAC9B;AAEA,SAAgB,iBAAiB,MAAyB,mBAA4B,OAA0B;CAC9G,IAAI,UAAU,CAAC,GAAG,IAAI;CAEtB,IAAI,kBAAkB;EACpB,MAAM,kBAAkB,QAAQ,QAC7B,EAAE,YAAY,UAAU,YAC3B;EACA,MAAM,cAAc,QAAQ,QAAQ,EAAE,YAAY,UAAU,EAAE;EAC9D,MAAM,gBAAgB,QACnB,QAAQ,EAAE,YAAY,UAAU,gBAAgB,UAAU,EAAE,CAAC,CAC7D,KAAK,mBAAmB;EAE3B,UAAU;GAAC,GAAG;GAAiB,GAAG;GAAa,GAAG;EAAa,CAAC,CAAC,KAC9D,SAAS;GACR,IAAI,MAAM,OACR,KAAK,QAAQ,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,KAAK,mBAAmB;GAGvD,OAAO;EACT,CACF;CACF;CAEA,OAAO;AACT"}

package/dist/es/Atomic/FormElements/Dropdown/components/DropdownLoader.js

@@ -0,0 +1,23 @@
+import '../../../../styles/base.css';
+import './DropdownLoader.styles.css';/* empty css                    */
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/Dropdown/components/DropdownLoader.js
+var DropdownLoader = function({ variant = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "dropdown-loader-box j5",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `lds-ring${variant === "little" ? " lds-ring_little" : ""}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {}),
+				/* @__PURE__ */ jsx("div", {}),
+				/* @__PURE__ */ jsx("div", {}),
+				/* @__PURE__ */ jsx("div", {})
+			]
+		})
+	});
+};
+//#endregion
+export { DropdownLoader as default };
+
+//# sourceMappingURL=DropdownLoader.js.map

package/dist/es/Atomic/FormElements/Dropdown/components/DropdownLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownLoader.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/Dropdown/components/DropdownLoader.js"],"sourcesContent":["import React from \"react\";\n\nimport \"./DropdownLoader.scss\";\n\nconst DropdownLoader = function ({ variant = '' }) {\n  return (\n    <div className=\"dropdown-loader-box j5\">\n      <div\n        className={`lds-ring${variant === \"little\" ? \" lds-ring_little\" : \"\"}`}\n      >\n        <div />\n        <div />\n        <div />\n        <div />\n      </div>\n    </div>\n  );\n};\n\nexport default DropdownLoader;\n"],"mappings":";;;;AAIA,IAAM,iBAAiB,SAAU,EAAE,UAAU,MAAM;CACjD,OACE,oBAAC,OAAA;EAAI,WAAU;EACb,UAAA,qBAAC,OAAA;GACC,WAAW,WAAW,YAAY,WAAW,qBAAqB;GAElE,UAAA;IAAA,oBAAC,OAAA,CAAA,CAAI;IACL,oBAAC,OAAA,CAAA,CAAI;IACL,oBAAC,OAAA,CAAA,CAAI;IACL,oBAAC,OAAA,CAAA,CAAI;GAAA;EAAA,CACP;CAAA,CACF;AAEJ"}

package/dist/es/Atomic/FormElements/Dropdown/components/DropdownLoader.styles.css

@@ -0,0 +1,61 @@
+.dropdown-loader-box {
+  position: absolute;
+  z-index: 100;
+  opacity: 0.1;
+  background: #fff;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.lds-ring {
+  position: relative;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+}
+
+.lds-ring.lds-ring_little {
+  width: 20px;
+  height: 20px;
+}
+
+.lds-ring div {
+  position: absolute;
+  display: block;
+  box-sizing: border-box;
+  width: 84px;
+  height: 84px;
+  margin: 8px;
+  border: 8px solid #000;
+  border-color: #000 transparent transparent;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.lds-ring_little div {
+  width: 20px;
+  height: 20px;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/es/Atomic/FormElements/Dropdown/index.js

@@ -0,0 +1,7 @@
+import Dropdown from "./Dropdown.js";
+//#region src/Atomic/FormElements/Dropdown/index.ts
+var Dropdown_default = Dropdown;
+//#endregion
+export { Dropdown_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/FormElements/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Dropdown/index.ts"],"sourcesContent":["import type { IDropdownOption, IDropdownProps } from './Dropdown.interface';\nimport Dropdown from './Dropdown';\n\nexport type { IDropdownOption, IDropdownProps };\nexport default Dropdown;\n"],"mappings":";;AAIA,IAAA,mBAAe"}