mimir-ui-kit 1.16.0 → 1.17.0

package/dist/assets/Accordion.css

@@ -1 +1 @@
-._accordion_18wwx_2{padding-bottom:var(--accordion-space);border-bottom:1px solid var(--black-20)}._accordion_18wwx_2 svg path{fill:var(--white)}._header_18wwx_10{display:flex;gap:var(--space-m);align-items:flex-start;justify-content:space-between;width:100%;font-weight:var(--font-weight-text-medium);font-family:var(--font-montserrat);text-align:left;border:none;cursor:pointer}._title_18wwx_23{font-size:var(--accordion-text-size)}._title-uppercase_18wwx_26{text-transform:uppercase}._icon_18wwx_30{transition:transform .3s ease-in-out}._icon-container_18wwx_33{display:flex;align-items:center;justify-content:center;min-width:var(--accordion-icon-width);min-height:var(--accordion-icon-height);background-color:var(--black-80);border-radius:50%;transition:background-color .3s ease-in-out}._panel_18wwx_44{margin-top:var(--accordion-panel-space)}._open_18wwx_48{background-color:var(--sapphire-100)}._open_18wwx_48 svg{transform:rotate(-180deg)}._m_18wwx_55{--accordion-space: var(--space-xl);--accordion-text-size: var(--size-text-xl2);--accordion-icon-width: var(--accordion-icon-size-m);--accordion-icon-height: var(--accordion-icon-size-m);--accordion-panel-space: var(--space-xl)}._s_18wwx_63{--accordion-space: var(--space-m);--accordion-text-size: var(--size-text-l);--accordion-icon-width: var(--accordion-icon-size-s);--accordion-icon-height: var(--accordion-icon-size-s);--accordion-panel-space: var(--space-m)}
+._accordion_11o2x_2{padding-bottom:var(--accordion-space);border-bottom:1px solid var(--black-20)}._accordion_11o2x_2 svg path{fill:var(--white)}._accordion_11o2x_2._is-link_11o2x_9{border:none}._header_11o2x_13{display:flex;gap:var(--space-m);align-items:flex-start;justify-content:space-between;width:100%;font-weight:var(--font-weight-text-medium);font-family:var(--font-montserrat);text-align:left;border:none;cursor:pointer}._title_11o2x_26{font-size:var(--accordion-text-size)}._title-uppercase_11o2x_29{text-transform:uppercase}._icon_11o2x_33{transition:transform .3s ease-in-out}._icon-container_11o2x_36{display:flex;align-items:center;justify-content:center;min-width:var(--accordion-icon-width);min-height:var(--accordion-icon-height);background-color:var(--black-80);border-radius:50%;transition:background-color .3s ease-in-out}._panel_11o2x_47{margin-top:var(--accordion-panel-space)}._panel_11o2x_47._is-link_11o2x_9{margin-top:var(--space-xs)}._open_11o2x_54{background-color:var(--sapphire-100)}._open_11o2x_54 svg{transform:rotate(-180deg)}._link-open_11o2x_61{transform:rotate(-180deg)}._m_11o2x_65{--accordion-space: var(--space-xl);--accordion-text-size: var(--size-text-xl2);--accordion-icon-width: var(--accordion-icon-size-m);--accordion-icon-height: var(--accordion-icon-size-m);--accordion-panel-space: var(--space-xl)}._s_11o2x_73{--accordion-space: var(--space-m);--accordion-text-size: var(--size-text-l);--accordion-icon-width: var(--accordion-icon-size-s);--accordion-icon-height: var(--accordion-icon-size-s);--accordion-panel-space: var(--space-m)}

package/dist/assets/AnchorLink.css

@@ -0,0 +1 @@
+._link_12t08_2{--link-color: var(--dark-text);display:inline-flex;align-items:center;color:var(--link-color);font-size:var(--link-font-size);font-family:var(--font-inter);line-height:var(--link-line-height);-moz-column-gap:var(--link-gap);column-gap:var(--link-gap);transition:all .15s ease}._link_12t08_2:hover{--link-color: var(--sapphire-hover)}._link_12t08_2:active{--link-color: var(--sapphire-active)}._link_12t08_2._sample_12t08_19:hover{-webkit-text-decoration:underline var(--link-color);text-decoration:underline var(--link-color);text-underline-offset:4px}._link_12t08_2._anchor_12t08_23:hover{-webkit-text-decoration:underline dashed var(--link-color);text-decoration:underline dashed var(--link-color);text-underline-offset:4px}._link_12t08_2._disabled_12t08_27{--link-color: var(--disabled);-webkit-text-decoration:none;text-decoration:none}._link_12t08_2._disabled_12t08_27:hover,._link_12t08_2._disabled_12t08_27:active{-webkit-text-decoration:none;text-decoration:none;--link-color: var(--disabled)}._link_12t08_2 ._icon_12t08_35{color:currentcolor;fill:currentcolor}._link_12t08_2 ._icon_12t08_35 path{color:currentcolor;fill:currentcolor}._xs_12t08_44{--link-font-size: var(--size-text-s);--link-line-height: var(--size-text-s);--link-gap: var(--space-2xs)}._s_12t08_19{--link-font-size: var(--size-text-m);--link-line-height: var(--size-text-s);--link-gap: var(--space-2xs)}._m_12t08_56{--link-font-size: var(--size-text-l);--link-line-height: var(--size-text-s);--link-gap: var(--space-2xs)}._l_12t08_2{--link-font-size: var(--size-text-l2);--link-line-height: var(--size-text-s);--link-gap: var(--space-xs)}

package/dist/components/Accordion/Accordion.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-import { EAccordionSize } from './constants';
+import { EAccordionButtonType, EAccordionSize } from './constants';
 
 export type TAccordionProps = {
     title: string;
     children: ReactNode;
     size?: EAccordionSize;
     titleUppercase?: boolean;
+    buttonType?: EAccordionButtonType | `${EAccordionButtonType}`;
 };
 export declare const Accordion: import('react').ForwardRefExoticComponent<TAccordionProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Accordion/Accordion.js

@@ -2,8 +2,11 @@ import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import React__default, { createContext, useRef, Fragment, useReducer, useMemo, useId, useEffect, useContext, forwardRef } from "react";
 import { AccordionItem } from "./AccordionItem/AccordionItem.js";
-import { EAccordionSize, EAccordionIconSize } from "./constants.js";
+import { EAccordionButtonType, EAccordionSize, EAccordionButtonIconSize, EAccordionLinkIconSize } from "./constants.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
 import { Icon } from "../../icons/Icon.js";
+import { Link } from "../AnchorLink/AnchorLink.js";
 import { M as M$1, W, y, T, o, a as u$1, H as H$1, I, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D, u as u$3, c as o$1 } from "../../keyboard-B256ZoM-.js";
 import { w } from "../../use-active-press-B6yeSopF.js";
 import { T as T$1 } from "../../use-resolve-button-type-B6LE6gU3.js";
@@ -116,58 +119,96 @@ function Re(e2, n) {
   return React__default.createElement(s$1, null, React__default.createElement(H.Provider, { value: t2.panelId }, H$1({ mergeRefs: f, ourProps: g, theirProps: d, slot: D2, defaultTag: Se, features: be, visible: p, name: "Disclosure.Panel" })));
 }
 let Ae = W(me), Ce = W(ge), Ie = W(Re), We = Object.assign(Ae, { Button: Ce, Panel: Ie });
-const accordion = "_accordion_18wwx_2";
-const header = "_header_18wwx_10";
-const title = "_title_18wwx_23";
-const icon = "_icon_18wwx_30";
-const panel = "_panel_18wwx_44";
-const open = "_open_18wwx_48";
-const m = "_m_18wwx_55";
-const s = "_s_18wwx_63";
+const accordion = "_accordion_11o2x_2";
+const header = "_header_11o2x_13";
+const title = "_title_11o2x_26";
+const icon = "_icon_11o2x_33";
+const panel = "_panel_11o2x_47";
+const open = "_open_11o2x_54";
+const m = "_m_11o2x_65";
+const s = "_s_11o2x_73";
 const cls = {
   accordion,
+  "is-link": "_is-link_11o2x_9",
   header,
   title,
-  "title-uppercase": "_title-uppercase_18wwx_26",
+  "title-uppercase": "_title-uppercase_11o2x_29",
   icon,
-  "icon-container": "_icon-container_18wwx_33",
+  "icon-container": "_icon-container_11o2x_36",
   panel,
   open,
+  "link-open": "_link-open_11o2x_61",
   m,
   s
 };
 const Accordion = forwardRef(
-  ({ title: title2, children, size = EAccordionSize.M, titleUppercase }, ref) => {
-    return /* @__PURE__ */ jsx("div", { className: classNames(cls.accordion, cls[size]), children: /* @__PURE__ */ jsx(We, { ref, children: ({ open: open2 }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsxs(Ce, { className: cls.header, children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: classNames(
-              cls.title,
-              titleUppercase && cls["title-uppercase"]
-            ),
-            children: title2
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: classNames(
-              cls["icon-container"],
-              open2 && cls.open
+  ({
+    title: title2,
+    buttonType = EAccordionButtonType.BUTTON,
+    children,
+    size = EAccordionSize.M,
+    titleUppercase
+  }, ref) => {
+    const isMobile = useMediaQuery(EMediaQuery.XS1);
+    const isLink = buttonType === "link";
+    const linkClasses = {
+      [cls["is-link"]]: isLink
+    };
+    const renderButton = (open2) => {
+      const buttonIcon = size === EAccordionSize.S ? EAccordionButtonIconSize.S : EAccordionButtonIconSize.M;
+      const linkIcon = size === EAccordionSize.S ? EAccordionLinkIconSize.S : EAccordionLinkIconSize.M;
+      switch (buttonType) {
+        case "link": {
+          return /* @__PURE__ */ jsx(
+            Link,
+            {
+              size: isMobile ? "s" : "l",
+              rightIcon: {
+                iconName: linkIcon,
+                className: classNames({
+                  [cls["link-open"]]: open2
+                })
+              },
+              children: title2
+            }
+          );
+        }
+        case "button": {
+          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  cls.title,
+                  titleUppercase && cls["title-uppercase"]
+                ),
+                children: title2
+              }
             ),
-            children: /* @__PURE__ */ jsx(
-              Icon,
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                iconName: size === EAccordionSize.S ? EAccordionIconSize.S : EAccordionIconSize.M,
-                className: cls.icon
+                className: classNames(cls["icon-container"], open2 && cls.open),
+                children: /* @__PURE__ */ jsx(Icon, { iconName: buttonIcon, className: cls.icon })
               }
             )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(Ie, { className: cls.panel, children: /* @__PURE__ */ jsx(AccordionItem, { size, children }) })
+          ] });
+        }
+        default: {
+          return null;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx("div", { className: classNames(cls.accordion, cls[size], linkClasses), children: /* @__PURE__ */ jsx(We, { ref, children: ({ open: open2 }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        Ce,
+        {
+          as: isLink ? Fragment : "button",
+          className: cls.header,
+          children: renderButton(open2)
+        }
+      ),
+      /* @__PURE__ */ jsx(Ie, { className: classNames(cls.panel, linkClasses), children: /* @__PURE__ */ jsx(AccordionItem, { size, children }) })
     ] }) }) });
   }
 );

package/dist/components/Accordion/constants.d.ts

@@ -2,7 +2,15 @@ export declare enum EAccordionSize {
     M = "m",
     S = "s"
 }
-export declare enum EAccordionIconSize {
+export declare enum EAccordionButtonType {
+    BUTTON = "button",
+    LINK = "link"
+}
+export declare enum EAccordionButtonIconSize {
     M = "ArrowDown24px",
     S = "ArrowDown16px"
 }
+export declare enum EAccordionLinkIconSize {
+    M = "DropdownArrowDown24px",
+    S = "DropdownArrowBottom16px"
+}

package/dist/components/Accordion/constants.js

@@ -3,12 +3,24 @@ var EAccordionSize = /* @__PURE__ */ ((EAccordionSize2) => {
   EAccordionSize2["S"] = "s";
   return EAccordionSize2;
 })(EAccordionSize || {});
-var EAccordionIconSize = /* @__PURE__ */ ((EAccordionIconSize2) => {
-  EAccordionIconSize2["M"] = "ArrowDown24px";
-  EAccordionIconSize2["S"] = "ArrowDown16px";
-  return EAccordionIconSize2;
-})(EAccordionIconSize || {});
+var EAccordionButtonType = /* @__PURE__ */ ((EAccordionButtonType2) => {
+  EAccordionButtonType2["BUTTON"] = "button";
+  EAccordionButtonType2["LINK"] = "link";
+  return EAccordionButtonType2;
+})(EAccordionButtonType || {});
+var EAccordionButtonIconSize = /* @__PURE__ */ ((EAccordionButtonIconSize2) => {
+  EAccordionButtonIconSize2["M"] = "ArrowDown24px";
+  EAccordionButtonIconSize2["S"] = "ArrowDown16px";
+  return EAccordionButtonIconSize2;
+})(EAccordionButtonIconSize || {});
+var EAccordionLinkIconSize = /* @__PURE__ */ ((EAccordionLinkIconSize2) => {
+  EAccordionLinkIconSize2["M"] = "DropdownArrowDown24px";
+  EAccordionLinkIconSize2["S"] = "DropdownArrowBottom16px";
+  return EAccordionLinkIconSize2;
+})(EAccordionLinkIconSize || {});
 export {
-  EAccordionIconSize,
+  EAccordionButtonIconSize,
+  EAccordionButtonType,
+  EAccordionLinkIconSize,
   EAccordionSize
 };

package/dist/components/AnchorLink/AnchorLink.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+import { ELinkSize, ELinkVariant } from './constants';
+import { TIconProps } from '../../icons';
+
+type TProps = ComponentProps<'button'> & {
+    variant?: ELinkVariant | `${ELinkVariant}`;
+    size?: ELinkSize | `${ELinkSize}`;
+    leftIcon?: TIconProps;
+    rightIcon?: TIconProps;
+    disabled?: boolean;
+};
+export declare const Link: import('react').ForwardRefExoticComponent<Omit<TProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/AnchorLink/AnchorLink.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef } from "react";
+import { ELinkSize, ELinkVariant } from "./constants.js";
+import { Icon } from "../../icons/Icon.js";
+import '../../assets/AnchorLink.css';const link = "_link_12t08_2";
+const sample = "_sample_12t08_19";
+const anchor = "_anchor_12t08_23";
+const disabled = "_disabled_12t08_27";
+const icon = "_icon_12t08_35";
+const xs = "_xs_12t08_44";
+const s = "_s_12t08_19";
+const m = "_m_12t08_56";
+const l = "_l_12t08_2";
+const cls = {
+  link,
+  sample,
+  anchor,
+  disabled,
+  icon,
+  xs,
+  s,
+  m,
+  l
+};
+const Link = forwardRef(
+  ({
+    leftIcon,
+    className,
+    size = ELinkSize.L,
+    variant = ELinkVariant.ANCHOR,
+    rightIcon,
+    disabled: disabled2,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled: disabled2,
+        className: classNames(cls.link, className, cls[variant], cls[size], {
+          [cls.disabled]: disabled2
+        }),
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...leftIcon,
+              className: classNames(cls.icon, leftIcon.className)
+            }
+          ),
+          props.children,
+          rightIcon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              ...rightIcon,
+              className: classNames(cls.icon, rightIcon.className)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Link
+};

package/dist/components/AnchorLink/constants.d.ts

@@ -0,0 +1,10 @@
+export declare enum ELinkSize {
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l"
+}
+export declare enum ELinkVariant {
+    SAMPLE = "sample",
+    ANCHOR = "anchor"
+}

package/dist/components/AnchorLink/constants.js

@@ -0,0 +1,16 @@
+var ELinkSize = /* @__PURE__ */ ((ELinkSize2) => {
+  ELinkSize2["XS"] = "xs";
+  ELinkSize2["S"] = "s";
+  ELinkSize2["M"] = "m";
+  ELinkSize2["L"] = "l";
+  return ELinkSize2;
+})(ELinkSize || {});
+var ELinkVariant = /* @__PURE__ */ ((ELinkVariant2) => {
+  ELinkVariant2["SAMPLE"] = "sample";
+  ELinkVariant2["ANCHOR"] = "anchor";
+  return ELinkVariant2;
+})(ELinkVariant || {});
+export {
+  ELinkSize,
+  ELinkVariant
+};

package/dist/components/AnchorLink/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './AnchorLink';
+export { ELinkSize, ELinkVariant } from './constants';

package/dist/components/AnchorLink/index.js

@@ -0,0 +1,7 @@
+import { Link } from "./AnchorLink.js";
+import { ELinkSize, ELinkVariant } from "./constants.js";
+export {
+  ELinkSize,
+  ELinkVariant,
+  Link
+};

package/dist/components/index.d.ts

@@ -37,3 +37,4 @@ export { UploaderPhotos } from './UploaderPhotos';
 export type { TUploaderPhotos, TOnChangePhotosUpdate } from './UploaderPhotos';
 export { Uploader } from './Uploader';
 export type { TUploadValue, TFileItem } from './Uploader';
+export { ELinkSize, ELinkVariant, Link } from './AnchorLink';

package/dist/components/index.js

@@ -37,6 +37,8 @@ import { useToast } from "./Toasts/hooks.js";
 import { EToastPosition, EToastVariant } from "./Toasts/constants.js";
 import { UploaderPhotos } from "./UploaderPhotos/UploaderPhotos.js";
 import { Uploader } from "./Uploader/Uploader.js";
+import { Link } from "./AnchorLink/AnchorLink.js";
+import { ELinkSize, ELinkVariant } from "./AnchorLink/constants.js";
 export {
   Accordion,
   AccordionItem,
@@ -52,6 +54,8 @@ export {
   EDrawerPosition,
   EInputSize,
   EInputVariant,
+  ELinkSize,
+  ELinkVariant,
   EMergedButtonVariantRound,
   ESelectSearchSize,
   EStepsPrimaryColor,
@@ -67,6 +71,7 @@ export {
   I as Input,
   InputPassword,
   InputPhoneNumber,
+  Link,
   Loader,
   MergedButton,
   OtpInput,

package/dist/icons/Icon.d.ts

@@ -1,8 +1,7 @@
 import { SVGProps } from 'react';
 import { TIcon } from './components/types';
 
-type TProps = Omit<SVGProps<SVGSVGElement>, 'ref'> & {
+export type TProps = Omit<SVGProps<SVGSVGElement>, 'ref'> & {
     iconName: TIcon;
 };
 export declare const Icon: ({ iconName, ...props }: TProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/icons/index.d.ts

@@ -1,2 +1,2 @@
-export { Icon } from './Icon';
+export { Icon, type TProps as TIconProps } from './Icon';
 export type { TIcon } from './components/types';

package/dist/index.js

@@ -37,6 +37,8 @@ import { useToast } from "./components/Toasts/hooks.js";
 import { EToastPosition, EToastVariant } from "./components/Toasts/constants.js";
 import { UploaderPhotos } from "./components/UploaderPhotos/UploaderPhotos.js";
 import { Uploader } from "./components/Uploader/Uploader.js";
+import { Link } from "./components/AnchorLink/AnchorLink.js";
+import { ELinkSize, ELinkVariant } from "./components/AnchorLink/constants.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery, EMinMediaQuery } from "./hooks/useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
@@ -61,6 +63,8 @@ import './assets/index.css';export {
   EDrawerPosition,
   EInputSize,
   EInputVariant,
+  ELinkSize,
+  ELinkVariant,
   EMediaQuery,
   EMergedButtonVariantRound,
   EMinMediaQuery,
@@ -79,6 +83,7 @@ import './assets/index.css';export {
   I as Input,
   InputPassword,
   InputPhoneNumber,
+  Link,
   Loader,
   MergedButton,
   OtpInput,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.16.0",
+  "version": "1.17.0",
   "type": "module",
   "exports": {
     ".": {