intelicoreact 2.0.17 → 2.0.19

package/dist/es/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionWithCheckbox.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.tsx"],"sourcesContent":["import type { IAccordionWithCheckboxProps } from '../TieredCheckboxes.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\nimport MonoAccordion from '../../../UI/MonoAccordion/MonoAccordion';\n\nimport CheckboxInput from '../../CheckboxInput/CheckboxInput';\n\nimport '../TieredCheckboxes.scss';\n\nconst AccordionWithCheckbox: React.FC<IAccordionWithCheckboxProps> = ({\n  children,\n  parent,\n  onChange,\n  className,\n  RC,\n  setIsOpen,\n  icon,\n  disabled,\n  datasetProp,\n  isUseParentsClassesAsDataset,\n}) => {\n  return (\n    <MonoAccordion\n      datasetProp={datasetProp}\n      className={cn(className, {\n        [`${parent.className}`]: !isUseParentsClassesAsDataset,\n      })}\n      isOpen={parent.isOpen}\n      onClick={setIsOpen}\n      icon={icon}\n      disabled={disabled}\n      // disabled={parent.children?.every?.((child) => child.disabled)}\n      titleJSX={(\n        <>\n          <CheckboxInput\n            id={`${parent.key}_checkbox-input`}\n            className={`${RC}__checkbox-input`}\n            isStark={\n              parent?.children?.some?.(item => item.value)\n              && !parent?.children?.every?.(item => item.value)\n            }\n            label={parent.label}\n            value={parent.value}\n            onChange={onChange}\n            disabled={\n              parent.children.every(({ disabled }) => disabled === true)\n              || parent.disabled\n            }\n          />\n          <span onClick={setIsOpen} className={`${RC}__description-checked`}>\n            {parent?.children?.length\n              ? `Selected ${parent.children.filter(child => child.value).length} from ${parent.children?.length}`\n              : null}\n          </span>\n        </>\n      )}\n    >\n      {children}\n    </MonoAccordion>\n  );\n};\n\nexport default AccordionWithCheckbox;\n"],"mappings":";;;;;;;AAUA,IAAM,yBAAgE,EACpE,UACA,QACA,UACA,WACA,IACA,WACA,MACA,UACA,aACA,mCACI;CACJ,OACE,oBAAC,eAAD;EACe;EACb,WAAW,GAAG,WAAW,GACtB,GAAG,OAAO,cAAc,CAAC,6BAC5B,CAAC;EACD,QAAQ,OAAO;EACf,SAAS;EACH;EACI;EAEV,UACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAD;GACE,IAAI,GAAG,OAAO,IAAI;GAClB,WAAW,GAAG,GAAG;GACjB,SACE,QAAQ,UAAU,QAAO,SAAQ,KAAK,KAAK,KACxC,CAAC,QAAQ,UAAU,SAAQ,SAAQ,KAAK,KAAK;GAElD,OAAO,OAAO;GACd,OAAO,OAAO;GACJ;GACV,UACE,OAAO,SAAS,OAAO,EAAE,eAAe,aAAa,IAAI,KACtD,OAAO;EAEb,CAAA,GACD,oBAAC,QAAD;GAAM,SAAS;GAAW,WAAW,GAAG,GAAG;aACxC,QAAQ,UAAU,SACf,YAAY,OAAO,SAAS,QAAO,UAAS,MAAM,KAAK,CAAC,CAAC,OAAO,QAAQ,OAAO,UAAU,WACzF;EACA,CAAA,CACN,EAAA,CAAA;EAGH;CACY,CAAA;AAEnB"}

package/dist/es/Atomic/FormElements/TimeRange/TimeRange.js

@@ -0,0 +1,55 @@
+import '../../../styles/base.css';
+import Input from "../Input/Input.js";
+import Label_default from "../Label/index.js";
+import useToggle from "../../../Functions/useToggle.js";
+import './TimeRange.styles.css';/* empty css               */
+import cn from "classnames";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import moment from "moment";
+//#region src/Atomic/FormElements/TimeRange/TimeRange.tsx
+var CN = "time-range";
+var TimeRange = ({ className, from = "", to = "", labelFrom, labelTo, testId = CN }) => {
+	const [startTime, setStartTime] = useState(from);
+	const [endTime, setEndTime] = useState(to);
+	const { isToggled: isStartTimeValidate } = useToggle();
+	const { isToggled: isEndTimeValidate } = useToggle();
+	const isStartTimeValid = useMemo(() => moment(startTime, "HH:mm", true).isValid(), [startTime]);
+	const isEndTimeValid = useMemo(() => moment(endTime, "HH:mm", true).isValid(), [endTime]);
+	const blurTimeHandler = (time, setFunc) => {
+		setFunc(time ? moment(time, "HH:mm").format("HH:mm") : "");
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		className: cn(CN, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "time-range__range",
+			children: [
+				/* @__PURE__ */ jsx(Label_default, { label: labelFrom || "Between" }),
+				/* @__PURE__ */ jsx(Input, {
+					className: "time-range__input",
+					value: startTime,
+					onChange: (value) => setStartTime(value),
+					placeholder: "00:00",
+					onBlur: () => blurTimeHandler(startTime, setStartTime),
+					error: isStartTimeValidate || !isStartTimeValid ? "HH:MM format" : "",
+					testId: "start-time-input"
+				}),
+				/* @__PURE__ */ jsx(Label_default, { label: labelTo || "and" }),
+				/* @__PURE__ */ jsx(Input, {
+					className: "time-range__input",
+					value: endTime,
+					onChange: (value) => setEndTime(value),
+					placeholder: "00:00",
+					onBlur: () => blurTimeHandler(endTime, setEndTime),
+					error: isEndTimeValidate || !isEndTimeValid ? "HH:MM format" : "",
+					testId: "end-time-input"
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { TimeRange as default };
+
+//# sourceMappingURL=TimeRange.js.map

package/dist/es/Atomic/FormElements/TimeRange/TimeRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRange.js","names":[],"sources":["../../../../../src/Atomic/FormElements/TimeRange/TimeRange.tsx"],"sourcesContent":["import type { ITimeRangePops } from './TimeRange.interface';\nimport cn from 'classnames';\nimport moment from 'moment';\n\nimport React, { useMemo, useState } from 'react';\nimport useToggle from '../../../Functions/useToggle';\n\nimport Input from '../Input/Input';\n\nimport Label from '../Label';\n\nimport './TimeRange.scss';\n\nconst CN = 'time-range';\n\nconst TimeRange: React.FC<ITimeRangePops> = ({\n  className,\n  from = '',\n  to = '',\n  labelFrom,\n  labelTo,\n  testId = CN,\n}) => {\n  const [startTime, setStartTime] = useState<string>(from);\n  const [endTime, setEndTime] = useState<string>(to);\n\n  const { isToggled: isStartTimeValidate } = useToggle();\n  const { isToggled: isEndTimeValidate } = useToggle();\n\n  const isStartTimeValid = useMemo(() => moment(startTime, 'HH:mm', true).isValid(), [startTime]);\n  const isEndTimeValid = useMemo(() => moment(endTime, 'HH:mm', true).isValid(), [endTime]);\n\n  const blurTimeHandler = (time: string, setFunc: (value: string) => void): void => {\n    const formattedTime = time ? moment(time, 'HH:mm').format('HH:mm') : '';\n    setFunc(formattedTime);\n  };\n\n  return (\n    <div data-testid={testId} className={cn(CN, className)}>\n      <div className=\"time-range__range\">\n        <Label label={labelFrom || 'Between'} />\n        <Input\n        // @ts-ignore - инпут пока .js\n        // ANCHOR - пока .js\n          className=\"time-range__input\"\n          value={startTime}\n          onChange={(value: string) => setStartTime(value)}\n          placeholder=\"00:00\"\n          onBlur={() => blurTimeHandler(startTime, setStartTime)}\n          error={isStartTimeValidate || !isStartTimeValid ? 'HH:MM format' : ''}\n          testId=\"start-time-input\"\n        />\n\n        <Label label={labelTo || 'and'} />\n        <Input\n        // @ts-ignore - инпут пока .js\n        // ANCHOR - пока .js\n          className=\"time-range__input\"\n          value={endTime}\n          onChange={(value: string) => setEndTime(value)}\n          placeholder=\"00:00\"\n          onBlur={() => blurTimeHandler(endTime, setEndTime)}\n          error={isEndTimeValidate || !isEndTimeValid ? 'HH:MM format' : ''}\n          testId=\"end-time-input\"\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default TimeRange;\n"],"mappings":";;;;;;;;;AAaA,IAAM,KAAK;AAEX,IAAM,aAAuC,EAC3C,WACA,OAAO,IACP,KAAK,IACL,WACA,SACA,SAAS,SACL;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAiB,IAAI;CACvD,MAAM,CAAC,SAAS,cAAc,SAAiB,EAAE;CAEjD,MAAM,EAAE,WAAW,wBAAwB,UAAU;CACrD,MAAM,EAAE,WAAW,sBAAsB,UAAU;CAEnD,MAAM,mBAAmB,cAAc,OAAO,WAAW,SAAS,IAAI,CAAC,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC;CAC9F,MAAM,iBAAiB,cAAc,OAAO,SAAS,SAAS,IAAI,CAAC,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC;CAExF,MAAM,mBAAmB,MAAc,YAA2C;EAEhF,QADsB,OAAO,OAAO,MAAM,OAAO,CAAC,CAAC,OAAO,OAAO,IAAI,EAChD;CACvB;CAEA,OACE,oBAAC,OAAD;EAAK,eAAa;EAAQ,WAAW,GAAG,IAAI,SAAS;YACnD,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,eAAD,EAAO,OAAO,aAAa,UAAY,CAAA;IACvC,oBAAC,OAAD;KAGE,WAAU;KACV,OAAO;KACP,WAAW,UAAkB,aAAa,KAAK;KAC/C,aAAY;KACZ,cAAc,gBAAgB,WAAW,YAAY;KACrD,OAAO,uBAAuB,CAAC,mBAAmB,iBAAiB;KACnE,QAAO;IACR,CAAA;IAED,oBAAC,eAAD,EAAO,OAAO,WAAW,MAAQ,CAAA;IACjC,oBAAC,OAAD;KAGE,WAAU;KACV,OAAO;KACP,WAAW,UAAkB,WAAW,KAAK;KAC7C,aAAY;KACZ,cAAc,gBAAgB,SAAS,UAAU;KACjD,OAAO,qBAAqB,CAAC,iBAAiB,iBAAiB;KAC/D,QAAO;IACR,CAAA;GACE;;CACF,CAAA;AAET"}

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

@@ -0,0 +1,18 @@
+:root {
+  --time-range-input-width: 60px;
+  --time-range-range-margin: 8px 0 13px;
+  --time-range-range-margin-right: 16px;
+}
+
+.time-range__input .form-input {
+  width: var(--time-range-input-width);
+}
+.time-range__range {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: var(--time-range-range-margin);
+}
+.time-range__range > *:not(:last-child) {
+  margin-right: var(--time-range-range-margin-right);
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/TimeRange/index.ts"],"sourcesContent":["import TimeRange from './TimeRange';\n\nexport default TimeRange;\nexport type { ITimeRangePops } from './TimeRange.interface';\n"],"mappings":";;AAEA,IAAA,oBAAe"}

package/dist/es/Atomic/FormElements/UserContacts/UserContacts.js

@@ -0,0 +1,115 @@
+import '../../../styles/base.css';
+import { Email } from "../../../Molecular/CustomIcons/components/Email.js";
+import { Phone } from "../../../Molecular/CustomIcons/components/Phone.js";
+import './UserContacts.styles.css';/* empty css                  */
+import cn from "classnames";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/UserContacts/UserContacts.tsx
+var RC = "user-contacts";
+var UserContacts = (props) => {
+	const { testId = RC, className, email, phone, EmailIcon, PhoneIcon, isFirstPhone = false, maxWidth, isUseCommaSeparator = true, generalizingWord = "contact", isNotRenderGeneralizingWord = false, Lng = (value) => value, otherContacts = [], isOtherTogetherMainContacts = false, ...mainContacts } = props || {};
+	const mainContactsDescriptions = {
+		isDisputeContact: "Dispute",
+		isSalesContact: "Sales",
+		isAccountingContact: "Accounting",
+		isBusinessContact: "Business",
+		isTechnicalContact: "Technical"
+	};
+	const getContact = (key) => {
+		const contact = mainContacts[key];
+		const { prefix = "", postfix = "" } = typeof contact === "object" ? contact : {};
+		return `${prefix ? `${Lng(prefix.toString())} ` : ""}${Lng(mainContactsDescriptions[key])}${postfix ? ` ${Lng(postfix.toString())}` : ""}`;
+	};
+	let mainContactsStructure = Object.keys(mainContacts).reduce((acc, key) => mainContacts[key] && key in mainContactsDescriptions ? [...acc, getContact(key)] : acc, []);
+	mainContactsStructure = isOtherTogetherMainContacts ? [...mainContactsStructure, ...Array.isArray(otherContacts) ? otherContacts.map((contact) => Lng(contact)) : []] : mainContactsStructure;
+	let mainContactsCount = mainContactsStructure.length;
+	let otherContactsCount = otherContacts?.length || 0;
+	const isContacts = Boolean(mainContactsCount) || Boolean(otherContactsCount);
+	const isMainContacts = Boolean(mainContactsCount);
+	const mainRef = useRef(null);
+	const firstRef = useRef(null);
+	const secondRef = useRef(null);
+	const contactsRef = useRef(null);
+	const [isIconMode, setIconMode] = useState(false);
+	const [isRunTask, setIsRunTask] = useState(null);
+	const getSeparator = (type) => {
+		const separator = isUseCommaSeparator ? ", " : " ";
+		switch (type) {
+			case "main": return mainContactsCount-- > 1 ? separator : "";
+			case "other": return otherContactsCount-- > 1 ? separator : "";
+			default: return separator;
+		}
+	};
+	const firstKey = isFirstPhone ? "phone" : "email";
+	const secondKey = isFirstPhone ? "email" : "phone";
+	const getIcon = (key) => {
+		switch (key) {
+			case "email": return EmailIcon || /* @__PURE__ */ jsx(Email, {});
+			case "phone": return PhoneIcon || /* @__PURE__ */ jsx(Phone, {});
+			default: return null;
+		}
+	};
+	const getProtocol = (key) => {
+		switch (key) {
+			case "email": return "mailto:";
+			case "phone": return "tel:";
+			default: return "https://";
+		}
+	};
+	const getClasses = (isFirst) => cn("no-wrap", `${RC}__${isFirst ? firstKey : secondKey}`, { [`${RC}__${isFirst ? firstKey : secondKey}_icon-mode`]: isIconMode });
+	const checkWidth = () => {
+		if (mainRef.current && firstRef.current && secondRef.current && contactsRef.current) {
+			const measure = maxWidth || mainRef.current.clientWidth;
+			if (firstRef.current.clientWidth + secondRef.current.clientWidth + contactsRef.current.clientWidth > measure) setIconMode(true);
+			else setIconMode(false);
+		}
+	};
+	useLayoutEffect(checkWidth, [isRunTask]);
+	useEffect(() => {
+		setIsRunTask({});
+		return () => setIconMode(false);
+	}, [
+		email,
+		phone,
+		JSON.stringify(mainContactsStructure),
+		Number(maxWidth)
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		ref: mainRef,
+		className: cn("j4", RC, className),
+		children: [
+			Boolean(props[firstKey]) && /* @__PURE__ */ jsx("a", {
+				ref: firstRef,
+				href: `${getProtocol(firstKey)}${props[firstKey]?.trim()}`,
+				target: "_blank",
+				rel: "noreferrer",
+				className: getClasses(true),
+				children: isIconMode ? getIcon(firstKey) : `${props[firstKey]}${props[secondKey] || isContacts ? getSeparator() : ""}`
+			}),
+			Boolean(props[secondKey]) && /* @__PURE__ */ jsx("a", {
+				ref: secondRef,
+				href: `${getProtocol(secondKey)}${props[secondKey]?.trim()}`,
+				target: "_blank",
+				rel: "noreferrer",
+				className: getClasses(false),
+				children: isIconMode ? getIcon(secondKey) : `${props[secondKey]}${isContacts ? getSeparator() : ""}`
+			}),
+			isContacts && /* @__PURE__ */ jsxs("span", {
+				ref: contactsRef,
+				className: cn("no-wrap", `${RC}__contacts`),
+				children: [
+					isMainContacts ? mainContactsStructure.map((contact) => `${contact}${getSeparator("main")}`) : null,
+					isMainContacts && generalizingWord && !isNotRenderGeneralizingWord ? ` ${Lng(generalizingWord)}` : "",
+					isMainContacts && Boolean(otherContacts) && Boolean(otherContacts?.length) && !isOtherTogetherMainContacts ? getSeparator() : "",
+					Boolean(otherContacts) && Boolean(otherContacts?.length) && !isOtherTogetherMainContacts ? otherContacts?.map?.((contact) => `${contact}${getSeparator("other")}`) : null
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { UserContacts as default };
+
+//# sourceMappingURL=UserContacts.js.map

package/dist/es/Atomic/FormElements/UserContacts/UserContacts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserContacts.js","names":[],"sources":["../../../../../src/Atomic/FormElements/UserContacts/UserContacts.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type {\n  IUserContactProps,\n  TContactPrefix,\n  TMainContactsDescriptions,\n} from './UserContacts.interface';\nimport cn from 'classnames';\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { Email, Phone } from '../../../Molecular/CustomIcons';\n\nimport './UserContacts.scss';\n\nconst RC = 'user-contacts';\n\nconst UserContacts: React.FC<IUserContactProps> = (props) => {\n  const {\n    testId = RC,\n    className,\n    email,\n    phone,\n    EmailIcon,\n    PhoneIcon,\n    isFirstPhone = false,\n    maxWidth,\n    isUseCommaSeparator = true,\n    generalizingWord = 'contact',\n    isNotRenderGeneralizingWord = false,\n    Lng = (value: string): string => value,\n    otherContacts = [],\n    isOtherTogetherMainContacts = false,\n    ...mainContacts\n  } = props || {};\n\n  const mainContactsDescriptions: TMainContactsDescriptions = {\n    isDisputeContact: 'Dispute',\n    isSalesContact: 'Sales',\n    isAccountingContact: 'Accounting',\n    isBusinessContact: 'Business',\n    isTechnicalContact: 'Technical',\n  };\n\n  const getContact = (key: keyof TMainContactsDescriptions): string => {\n    const contact = mainContacts[key] as TContactPrefix | boolean | undefined;\n    const { prefix = '', postfix = '' } = typeof contact === 'object' ? contact : {};\n\n    return `${prefix ? `${Lng(prefix.toString())} ` : ''}${Lng(mainContactsDescriptions[key])}${\n      postfix ? ` ${Lng(postfix.toString())}` : ''\n    }`;\n  };\n\n  let mainContactsStructure: string[] = (\n    Object.keys(mainContacts) as Array<keyof TMainContactsDescriptions>\n  ).reduce(\n    (acc: string[], key) =>\n      mainContacts[key] && key in mainContactsDescriptions ? [...acc, getContact(key)] : acc,\n    [],\n  );\n\n  mainContactsStructure = isOtherTogetherMainContacts\n    ? [\n        ...mainContactsStructure,\n        ...(Array.isArray(otherContacts) ? otherContacts.map((contact: string) => Lng(contact)) : []),\n      ]\n    : mainContactsStructure;\n\n  let mainContactsCount = mainContactsStructure.length;\n  let otherContactsCount = otherContacts?.length || 0;\n  const isContacts = Boolean(mainContactsCount) || Boolean(otherContactsCount);\n  const isMainContacts = Boolean(mainContactsCount);\n\n  const mainRef = useRef<HTMLDivElement>(null);\n  const firstRef = useRef<HTMLAnchorElement>(null);\n  const secondRef = useRef<HTMLAnchorElement>(null);\n  const contactsRef = useRef<HTMLSpanElement>(null);\n\n  const [isIconMode, setIconMode] = useState<boolean>(false);\n  const [isRunTask, setIsRunTask] = useState<Record<string, never> | null>(null);\n\n  const getSeparator = (type?: 'main' | 'other'): string => {\n    const separator = isUseCommaSeparator ? ', ' : ' ';\n    switch (type) {\n      case 'main':\n        return mainContactsCount-- > 1 ? separator : '';\n      case 'other':\n        return otherContactsCount-- > 1 ? separator : '';\n      default:\n        return separator;\n    }\n  };\n\n  type ContactKey = 'email' | 'phone';\n\n  const firstKey: ContactKey = isFirstPhone ? 'phone' : 'email';\n  const secondKey: ContactKey = isFirstPhone ? 'email' : 'phone';\n\n  const getIcon = (key: ContactKey): ReactNode => {\n    switch (key) {\n      case 'email':\n        return EmailIcon || <Email />;\n      case 'phone':\n        return PhoneIcon || <Phone />;\n      default:\n        return null;\n    }\n  };\n\n  const getProtocol = (key: ContactKey): string => {\n    switch (key) {\n      case 'email':\n        return 'mailto:';\n      case 'phone':\n        return 'tel:';\n      default:\n        return 'https://';\n    }\n  };\n\n  const getClasses = (isFirst: boolean): string =>\n    cn('no-wrap', `${RC}__${isFirst ? firstKey : secondKey}`, {\n      [`${RC}__${isFirst ? firstKey : secondKey}_icon-mode`]: isIconMode,\n    });\n\n  const checkWidth = (): void => {\n    if (mainRef.current && firstRef.current && secondRef.current && contactsRef.current) {\n      const measure: number = maxWidth || mainRef.current.clientWidth;\n\n      if (\n        firstRef.current.clientWidth + secondRef.current.clientWidth + contactsRef.current.clientWidth\n        > measure\n      ) {\n        setIconMode(true);\n      }\n      else {\n        setIconMode(false);\n      }\n    }\n  };\n\n  useLayoutEffect(checkWidth, [isRunTask]);\n\n  useEffect(() => {\n    setIsRunTask({});\n    return () => setIconMode(false);\n  }, [email, phone, JSON.stringify(mainContactsStructure), Number(maxWidth)]);\n\n  return (\n    <div data-testid={testId} ref={mainRef} className={cn('j4', RC, className)}>\n      {Boolean(props[firstKey]) && (\n        <a\n          ref={firstRef}\n          href={`${getProtocol(firstKey)}${props[firstKey]?.trim()}`}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className={getClasses(true)}\n        >\n          {isIconMode\n            ? getIcon(firstKey)\n            : `${props[firstKey]}${props[secondKey] || isContacts ? getSeparator() : ''}`}\n        </a>\n      )}\n      {Boolean(props[secondKey]) && (\n        <a\n          ref={secondRef}\n          href={`${getProtocol(secondKey)}${props[secondKey]?.trim()}`}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          className={getClasses(false)}\n        >\n          {isIconMode ? getIcon(secondKey) : `${props[secondKey]}${isContacts ? getSeparator() : ''}`}\n        </a>\n      )}\n\n      {isContacts && (\n        <span ref={contactsRef} className={cn('no-wrap', `${RC}__contacts`)}>\n          {isMainContacts\n            ? mainContactsStructure.map((contact: string) => `${contact}${getSeparator('main')}`)\n            : null}\n          {isMainContacts && generalizingWord && !isNotRenderGeneralizingWord\n            ? ` ${Lng(generalizingWord)}`\n            : ''}\n          {isMainContacts\n            && Boolean(otherContacts)\n            && Boolean(otherContacts?.length)\n            && !isOtherTogetherMainContacts\n            ? getSeparator()\n            : ''}\n          {Boolean(otherContacts) && Boolean(otherContacts?.length) && !isOtherTogetherMainContacts\n            ? otherContacts?.map?.((contact: string) => `${contact}${getSeparator('other')}`)\n            : null}\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default UserContacts;\n"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+:root {
+  --user-contacts-margin-right: 5px;
+  --user-contacts-icon-mode-width: 16px;
+  --user-contacts-icon-mode-height: 16px;
+  --user-contacts-icon-mode-margin-right: 8px;
+}
+
+.user-contacts__email, .user-contacts__phone {
+  margin-right: var(--user-contacts-margin-right);
+}
+.user-contacts__email_icon-mode, .user-contacts__phone_icon-mode {
+  width: var(--user-contacts-icon-mode-width);
+  height: var(--user-contacts-icon-mode-height);
+  margin-right: var(--user-contacts-icon-mode-margin-right);
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/UserContacts/index.ts"],"sourcesContent":["import UserContacts from './UserContacts';\n\nexport default UserContacts;\nexport type { IUserContactProps, TContactPrefix } from './UserContacts.interface';\n"],"mappings":";;AAEA,IAAA,uBAAe"}

package/dist/es/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js

@@ -0,0 +1,52 @@
+import '../../../styles/base.css';
+import { compare } from "../../../Functions/utils.js";
+import VariantsListRadioItem from "./partials/VariantsListRadioItem.js";
+import './VariantsListRadio.styles.css';/* empty css                       */
+import cn from "classnames";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js
+var RC = "variants-list-radio";
+var VariantsListRadio = ({ items: outerItems, value: outerValue, onChange = () => {}, isWithBorders, itemsContentRenderMode, isRadioPositionReverse, isUseAsOptionsList, disabled, isDisabled, id, className, testId = "variants-list-radio", attributesOfNativeInput, isMixWithPersonalAttributes }) => {
+	const [items, setItems] = useState(outerItems);
+	const [value, setValue] = useState(outerValue);
+	const componentnId = id || "variantsListRadio";
+	const mode = itemsContentRenderMode === "col" ? "col" : "row";
+	const isElementDisabled = disabled || isDisabled;
+	const handleChange = (newValue) => {
+		setValue(newValue);
+		onChange(newValue);
+	};
+	useEffect(() => {
+		if (!compare(outerItems, items)) setItems(outerItems);
+	}, [outerItems]);
+	useEffect(() => {
+		if (value !== outerValue) setValue(outerValue);
+	}, [outerValue]);
+	return /* @__PURE__ */ jsx("div", {
+		id: componentnId,
+		"data-testid": testId,
+		className: cn(RC, `${RC}_items-content-${mode}`, className, {
+			[`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,
+			[`${RC}_radio-position-reverse`]: isRadioPositionReverse
+		}),
+		children: items.map((item) => /* @__PURE__ */ jsx(VariantsListRadioItem, {
+			RC,
+			parentId: componentnId,
+			item: {
+				...item,
+				isDisabled: item.disabled || item.isDisabled || isElementDisabled || false
+			},
+			value,
+			onChange: handleChange,
+			attributesOfNativeInput,
+			isMixWithPersonalAttributes,
+			parentDisabled: disabled,
+			isUseAsOptionsList
+		}, `variants-list-radio-id-${componentnId}-item-id-${item.value}`))
+	});
+};
+//#endregion
+export { VariantsListRadio as default };
+
+//# sourceMappingURL=VariantsListRadio.js.map

package/dist/es/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantsListRadio.js","names":[],"sources":["../../../../../src/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport cn from \"classnames\";\n\nimport { compare } from \"../../../Functions/utils\";\n\nimport VariantsListRadioItem from \"./partials/VariantsListRadioItem\";\n\nimport \"./VariantsListRadio.scss\";\n\nconst RC = \"variants-list-radio\";\n\nconst VariantsListRadio = ({\n  items: outerItems,\n  value: outerValue,\n  onChange = () => {},\n\n  isWithBorders,\n  itemsContentRenderMode,\n  isRadioPositionReverse,\n  isUseAsOptionsList,\n  disabled,\n  isDisabled,\n\n  id,\n  className,\n  testId = \"variants-list-radio\",\n\n  attributesOfNativeInput,\n  isMixWithPersonalAttributes,\n}) => {\n  const [items, setItems] = useState(outerItems);\n  const [value, setValue] = useState(outerValue);\n\n  const componentnId = id || \"variantsListRadio\";\n  const mode = itemsContentRenderMode === \"col\" ? \"col\" : \"row\";\n  const isElementDisabled = disabled || isDisabled;\n\n  const handleChange = (newValue) => {\n    setValue(newValue);\n    onChange(newValue);\n  };\n\n  useEffect(() => {\n    if (!compare(outerItems, items)) setItems(outerItems);\n  }, [outerItems]);\n\n  useEffect(() => {\n    if (value !== outerValue) setValue(outerValue);\n  }, [outerValue]);\n\n  return (\n    <div\n      id={componentnId}\n      data-testid={testId}\n      className={cn(RC, `${RC}_items-content-${mode}`, className, {\n        [`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,\n        [`${RC}_radio-position-reverse`]: isRadioPositionReverse,\n      })}\n    >\n      {items.map((item) => (\n        <VariantsListRadioItem\n          key={`variants-list-radio-id-${componentnId}-item-id-${item.value}`}\n          RC={RC}\n          parentId={componentnId}\n          item={{\n            ...item,\n            isDisabled:\n              item.disabled || item.isDisabled || isElementDisabled || false,\n          }}\n          value={value}\n          onChange={handleChange}\n          attributesOfNativeInput={attributesOfNativeInput}\n          isMixWithPersonalAttributes={isMixWithPersonalAttributes}\n          parentDisabled={disabled}\n          isUseAsOptionsList={isUseAsOptionsList}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default VariantsListRadio;\n"],"mappings":";;;;;;;AAUA,IAAM,KAAK;AAEX,IAAM,qBAAqB,EACzB,OAAO,YACP,OAAO,YACP,iBAAiB,CAAC,GAElB,eACA,wBACA,wBACA,oBACA,UACA,YAEA,IACA,WACA,SAAS,uBAET,yBACA,kCACI;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,UAAU;CAC7C,MAAM,CAAC,OAAO,YAAY,SAAS,UAAU;CAE7C,MAAM,eAAe,MAAM;CAC3B,MAAM,OAAO,2BAA2B,QAAQ,QAAQ;CACxD,MAAM,oBAAoB,YAAY;CAEtC,MAAM,gBAAgB,aAAa;EACjC,SAAS,QAAQ;EACjB,SAAS,QAAQ;CACnB;CAEA,gBAAgB;EACd,IAAI,CAAC,QAAQ,YAAY,KAAK,GAAG,SAAS,UAAU;CACtD,GAAG,CAAC,UAAU,CAAC;CAEf,gBAAgB;EACd,IAAI,UAAU,YAAY,SAAS,UAAU;CAC/C,GAAG,CAAC,UAAU,CAAC;CAEf,OACE,oBAAC,OAAA;EACC,IAAI;EACJ,eAAa;EACb,WAAW,GAAG,IAAI,GAAG,GAAE,iBAAkB,QAAQ,WAAW;IACzD,GAAG,GAAE,iBAAkB,iBAAiB,CAAC;IACzC,GAAG,GAAE,2BAA4B;EACpC,CAAC;EAEA,UAAA,MAAM,KAAK,SACV,oBAAC,uBAAA;GAEC;GACA,UAAU;GACV,MAAM;IACJ,GAAG;IACH,YACE,KAAK,YAAY,KAAK,cAAc,qBAAqB;GAC7D;GACA;GACA,UAAU;GACV;GACA;GACA,gBAAgB;GAChB;EAAA,GAbK,0BAA0B,aAAY,WAAY,KAAK,OAc9D,CACD;CAAA,CACH;AAEJ"}

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

@@ -0,0 +1,213 @@
+.variants-list-radio {
+  --variants-list-radio--item-padding: 10px 16px;
+  --variants-list-radio--item-border-radius: 6px;
+  --variants-list-radio--margin-after-item: 2px;
+  --variants-list-radio--item-background-color: #fff;
+  --variants-list-radio--item-highlight-background-color: #f7f8fa;
+  --variants-list-radio--item-with-borders-highlight-background-color: transparent;
+  --variants-list-radio--disabled-item-highlight-background-color: transparent;
+  --variants-list-radio--disabled-item-with-borders-highlight-background-color: #f7f8fa;
+  --variants-list-radio--item-border-color: rgba(58, 72, 122, 0.15);
+  --variants-list-radio--item-border-color-active: #1f7499;
+  --variants-list-radio--radio-margin: 8px;
+  --variants-list-radio--radio-diameter: 16px;
+  --variants-list-radio--radio-mark-diameter: 8px;
+  --variants-list-radio--radio-container-min-height: 20px;
+  --variants-list-radio--radio-color: #a6aab4;
+  --variants-list-radio--radio-color-active: var(
+    --variants-list-radio--item-border-color-active
+  );
+  --variants-list-radio--label-font-family: sarabun;
+  --variants-list-radio--label-font-size: 16px;
+  --variants-list-radio--label-font-style: normal;
+  --variants-list-radio--label-font-weight: 400;
+  --variants-list-radio--label-line-height: 24px;
+  --variants-list-radio--label-letter-spacing: 0.2px;
+  --variants-list-radio--label-color: #171d33;
+  --variants-list-radio--description-font-family: sarabun;
+  --variants-list-radio--description-font-size: 14px;
+  --variants-list-radio--description-font-style: normal;
+  --variants-list-radio--description-font-weight: 400;
+  --variants-list-radio--description-line-height: 20px;
+  --variants-list-radio--description-letter-spacing: 0.2px;
+  --variants-list-radio--description-color: #757f8c;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  background-color: transparent;
+}
+.variants-list-radio__item {
+  display: flex;
+  flex-flow: row-reverse nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: var(--variants-list-radio--margin-after-item);
+  padding: var(--variants-list-radio--item-padding);
+  cursor: pointer;
+  border-radius: var(--variants-list-radio--item-border-radius);
+  background-color: var(--variants-list-radio--item-background-color);
+}
+.variants-list-radio__item:last-child {
+  margin-bottom: 0;
+}
+.variants-list-radio__item.variants-list-radio__item_as-option {
+  padding: 0;
+}
+.variants-list-radio__item-radio-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  width: var(--variants-list-radio--radio-diameter);
+  min-height: var(--variants-list-radio--radio-container-min-height);
+  margin-left: var(--variants-list-radio--radio-margin);
+}
+.variants-list-radio__item-radio {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--variants-list-radio--radio-diameter);
+  height: var(--variants-list-radio--radio-diameter);
+  border: 1px solid var(--variants-list-radio--radio-color);
+  border-radius: 50%;
+  background: #fff;
+}
+.variants-list-radio__item-radio > input {
+  display: none;
+}
+.variants-list-radio__item-radio-mark {
+  position: absolute;
+  top: calc(50% - var(--variants-list-radio--radio-mark-diameter) / 2);
+  left: calc(50% - var(--variants-list-radio--radio-mark-diameter) / 2);
+  width: var(--variants-list-radio--radio-mark-diameter);
+  height: var(--variants-list-radio--radio-mark-diameter);
+  border-radius: 50%;
+  background: transparent;
+}
+.variants-list-radio__item-content {
+  display: flex;
+  overflow: hidden;
+  flex-grow: 1;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.variants-list-radio__item-content-wrapper {
+  display: flex;
+  overflow: hidden;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  width: fit-content;
+  vertical-align: middle;
+}
+.variants-list-radio__item-content-label, .variants-list-radio__item-content-description {
+  overflow: hidden;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.variants-list-radio__item-content-label {
+  font-family: var(--variants-list-radio--label-font-family);
+  font-size: var(--variants-list-radio--label-font-size);
+  font-weight: var(--variants-list-radio--label-font-weight);
+  font-style: var(--variants-list-radio--label-font-style);
+  line-height: var(--variants-list-radio--label-line-height);
+  letter-spacing: var(--variants-list-radio--label-letter-spacing);
+  color: var(--variants-list-radio--label-color);
+}
+.variants-list-radio__item-content-description {
+  font-family: var(--variants-list-radio--description-font-family);
+  font-size: var(--variants-list-radio--description-font-size);
+  font-weight: var(--variants-list-radio--description-font-weight);
+  font-style: var(--variants-list-radio--description-font-style);
+  line-height: var(--variants-list-radio--description-line-height);
+  letter-spacing: var(--variants-list-radio--description-letter-spacing);
+  color: var(--variants-list-radio--description-color);
+}
+.variants-list-radio__item:hover .variants-list-radio__item-radio {
+  border-color: var(--variants-list-radio--radio-color-active);
+}
+.variants-list-radio__item_active {
+  background-color: var(--variants-list-radio--item-highlight-background-color);
+}
+.variants-list-radio__item_active .variants-list-radio__item-radio {
+  border-color: var(--variants-list-radio--radio-color-active);
+}
+.variants-list-radio__item_active .variants-list-radio__item-radio-mark {
+  background-color: var(--variants-list-radio--radio-color-active);
+}
+.variants-list-radio__item_active.variants-list-radio__item_as-option {
+  background-color: var(--variants-list-radio--item-background-color);
+}
+.variants-list-radio__item_disabled {
+  pointer-events: none;
+  background-color: var(--variants-list-radio--item-background-color);
+}
+.variants-list-radio__item_disabled .variants-list-radio__item-radio {
+  border-color: #a6aab4;
+  background-color: #e8e9ec;
+}
+.variants-list-radio__item_disabled.variants-list-radio__item_active {
+  background-color: var(--variants-list-radio--disabled-item-highlight-background-color);
+}
+.variants-list-radio__item_disabled.variants-list-radio__item_active .variants-list-radio__item-radio-mark {
+  background-color: #757f8c;
+}
+.variants-list-radio__item_disabled.variants-list-radio__item_active.variants-list-radio__item_as-option .variants-list-radio__item-content-label {
+  color: #3b414b;
+}
+.variants-list-radio__item_disabled.variants-list-radio__item_as-option .variants-list-radio__item-content-label {
+  color: #757f8c;
+}
+.variants-list-radio_items-content-row .variants-list-radio__item {
+  height: 40px;
+}
+.variants-list-radio_items-content-row .variants-list-radio__item-content {
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.variants-list-radio_items-content-row .variants-list-radio__item-content-wrapper:first-child {
+  margin-right: 4px;
+}
+.variants-list-radio_items-content-row .variants-list-radio__item-content-wrapper:last-child {
+  flex-grow: 1;
+  width: 0;
+  padding-top: 2px;
+}
+.variants-list-radio_items-content-col .variants-list-radio__item {
+  height: fit-content;
+}
+.variants-list-radio_items-content-col .variants-list-radio__item-content {
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.variants-list-radio_items-content-col .variants-list-radio__item-content-wrapper {
+  width: 100%;
+}
+.variants-list-radio_radio-position-reverse .variants-list-radio__item {
+  flex-flow: row nowrap;
+}
+.variants-list-radio_radio-position-reverse .variants-list-radio__item-radio-container {
+  margin-right: var(--variants-list-radio--radio-margin);
+  margin-left: 0;
+}
+.variants-list-radio_with-borders .variants-list-radio__item {
+  border: solid 1px var(--variants-list-radio--item-border-color);
+}
+.variants-list-radio_with-borders .variants-list-radio__item_active {
+  border-color: var(--variants-list-radio--item-border-color-active);
+  background-color: var(--variants-list-radio--item-with-borders-highlight-background-color);
+}
+.variants-list-radio_with-borders .variants-list-radio__item_disabled.variants-list-radio__item_active {
+  border-color: var(--variants-list-radio--item-border-color);
+  background-color: var(--variants-list-radio--disabled-item-with-borders-highlight-background-color);
+}

package/dist/es/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js

@@ -0,0 +1,61 @@
+import { getIsOnlyAnObject } from "../../../../Functions/utils.js";
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js
+var VariantsListRadioItem = ({ RC, parentId, item, value: actualValue, onChange = () => {}, attributesOfNativeInput = {}, isMixWithPersonalAttributes, isUseAsOptionsList, testId = "variants-list-radio-item" }) => {
+	if (!parentId || !getIsOnlyAnObject(item)) return null;
+	const { value, label, description, isDisabled, attributesOfNativeInput: personalAttributesOfNativeInput } = item;
+	const id = `${parentId.toString()}--item-${value}`;
+	const name = parentId.toString();
+	const isActive = actualValue === value;
+	const addAtributesObj = isMixWithPersonalAttributes ? {
+		...attributesOfNativeInput,
+		...personalAttributesOfNativeInput
+	} : personalAttributesOfNativeInput || attributesOfNativeInput || {};
+	return /* @__PURE__ */ jsxs("label", {
+		"data-testid": testId,
+		className: cn(`${RC}__item`, {
+			[`${RC}__item_disabled`]: isDisabled,
+			[`${RC}__item_active`]: isActive,
+			[`${RC}__item_as-option`]: isUseAsOptionsList
+		}),
+		htmlFor: id,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn(`${RC}__item-radio-container`),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn(`${RC}__item-radio`),
+				children: [/* @__PURE__ */ jsx("input", {
+					id,
+					"data-testid": `${testId}-input`,
+					type: "radio",
+					checked: isActive,
+					className: `${RC}__item-radio-input`,
+					onChange: () => onChange(value),
+					name,
+					disabled: isDisabled,
+					...addAtributesObj
+				}), /* @__PURE__ */ jsx("div", { className: `${RC}__item-radio-mark` })]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn(`${RC}__item-content`),
+			children: [label && /* @__PURE__ */ jsx("div", {
+				className: cn(`${RC}__item-content-wrapper`),
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__item-content-label`),
+					children: label
+				})
+			}), description && !isUseAsOptionsList && /* @__PURE__ */ jsx("div", {
+				className: cn(`${RC}__item-content-wrapper`),
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__item-content-description`),
+					children: description
+				})
+			})]
+		})]
+	});
+};
+//#endregion
+export { VariantsListRadioItem as default };
+
+//# sourceMappingURL=VariantsListRadioItem.js.map

package/dist/es/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantsListRadioItem.js","names":[],"sources":["../../../../../../src/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js"],"sourcesContent":["import React from \"react\";\n\nimport cn from \"classnames\";\n\nimport { getIsOnlyAnObject } from \"../../../../Functions/utils\";\n\nconst VariantsListRadioItem = ({\n  RC,\n  parentId,\n  item,\n  value: actualValue,\n  onChange = () => {},\n\n  attributesOfNativeInput = {},\n  isMixWithPersonalAttributes,\n\n  isUseAsOptionsList,\n  testId = \"variants-list-radio-item\",\n}) => {\n  // ? Для корректной работы нужны parentId и item(объект)\n  if (!parentId || !getIsOnlyAnObject(item)) return null;\n\n  const {\n    value,\n    label,\n    description,\n    isDisabled,\n    attributesOfNativeInput: personalAttributesOfNativeInput,\n  } = item;\n  const id = `${parentId.toString()}--item-${value}`;\n  const name = parentId.toString();\n  const isActive = actualValue === value;\n  const addAtributesObj = isMixWithPersonalAttributes\n    ? { ...attributesOfNativeInput, ...personalAttributesOfNativeInput }\n    : personalAttributesOfNativeInput || attributesOfNativeInput || {};\n\n  return (\n    <label\n      data-testid={testId}\n      className={cn(`${RC}__item`, {\n        [`${RC}__item_disabled`]: isDisabled,\n        [`${RC}__item_active`]: isActive,\n        [`${RC}__item_as-option`]: isUseAsOptionsList,\n      })}\n      htmlFor={id}\n    >\n      <div className={cn(`${RC}__item-radio-container`)}>\n        <div className={cn(`${RC}__item-radio`)}>\n          <input\n            id={id}\n            data-testid={`${testId}-input`}\n            type=\"radio\"\n            checked={isActive}\n            className={`${RC}__item-radio-input`}\n            onChange={() => onChange(value)}\n            name={name}\n            disabled={isDisabled}\n            {...addAtributesObj}\n          />\n          <div className={`${RC}__item-radio-mark`}></div>\n        </div>\n      </div>\n\n      <div className={cn(`${RC}__item-content`)}>\n        {label && (\n          <div className={cn(`${RC}__item-content-wrapper`)}>\n            <div className={cn(`${RC}__item-content-label`)}>{label}</div>\n          </div>\n        )}\n        {description && !isUseAsOptionsList && (\n          <div className={cn(`${RC}__item-content-wrapper`)}>\n            <div className={cn(`${RC}__item-content-description`)}>\n              {description}\n            </div>\n          </div>\n        )}\n      </div>\n    </label>\n  );\n};\n\nexport default VariantsListRadioItem;\n"],"mappings":";;;;;AAMA,IAAM,yBAAyB,EAC7B,IACA,UACA,MACA,OAAO,aACP,iBAAiB,CAAC,GAElB,0BAA0B,CAAC,GAC3B,6BAEA,oBACA,SAAS,iCACL;CAEJ,IAAI,CAAC,YAAY,CAAC,kBAAkB,IAAI,GAAG,OAAO;CAElD,MAAM,EACJ,OACA,OACA,aACA,YACA,yBAAyB,oCACvB;CACJ,MAAM,KAAK,GAAG,SAAS,SAAS,EAAC,SAAU;CAC3C,MAAM,OAAO,SAAS,SAAS;CAC/B,MAAM,WAAW,gBAAgB;CACjC,MAAM,kBAAkB,8BACpB;EAAE,GAAG;EAAyB,GAAG;CAAgC,IACjE,mCAAmC,2BAA2B,CAAC;CAEnE,OACE,qBAAC,SAAA;EACC,eAAa;EACb,WAAW,GAAG,GAAG,GAAE,SAAU;IAC1B,GAAG,GAAE,mBAAoB;IACzB,GAAG,GAAE,iBAAkB;IACvB,GAAG,GAAE,oBAAqB;EAC7B,CAAC;EACD,SAAS;EAET,UAAA,CAAA,oBAAC,OAAA;GAAI,WAAW,GAAG,GAAG,GAAE,uBAAwB;GAC9C,UAAA,qBAAC,OAAA;IAAI,WAAW,GAAG,GAAG,GAAE,aAAc;IACpC,UAAA,CAAA,oBAAC,SAAA;KACC;KACA,eAAa,GAAG,OAAM;KACtB,MAAK;KACL,SAAS;KACT,WAAW,GAAG,GAAE;KAChB,gBAAgB,SAAS,KAAK;KAC9B;KACA,UAAU;KACT,GAAG;IAAA,CACN,GACA,oBAAC,OAAA,EAAI,WAAW,GAAG,GAAE,mBAAA,CAAqB,CAAA;GAAA,CAC5C;EAAA,CACF,GAEA,qBAAC,OAAA;GAAI,WAAW,GAAG,GAAG,GAAE,eAAgB;GACrC,UAAA,CAAA,SACC,oBAAC,OAAA;IAAI,WAAW,GAAG,GAAG,GAAE,uBAAwB;IAC9C,UAAA,oBAAC,OAAA;KAAI,WAAW,GAAG,GAAG,GAAE,qBAAsB;KAAI,UAAA;IAAA,CAAM;GAAA,CAC1D,GAED,eAAe,CAAC,sBACf,oBAAC,OAAA;IAAI,WAAW,GAAG,GAAG,GAAE,uBAAwB;IAC9C,UAAA,oBAAC,OAAA;KAAI,WAAW,GAAG,GAAG,GAAE,2BAA4B;KACjD,UAAA;IAAA,CACH;GAAA,CACF,CAAA;EAAA,CAEJ,CAAA;CAAA,CACF;AAEJ"}