@payloadcms/ui 3.0.0-beta.11 → 3.0.0-beta.111

package/dist/elements/Button/index.js

@@ -1,106 +1,165 @@
 'use client';
-import React, { Fragment, forwardRef, isValidElement } from 'react';
-import { Chevron } from '../../icons/Chevron/index.js';
-import { Edit } from '../../icons/Edit/index.js';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, Fragment, isValidElement } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { EditIcon } from '../../icons/Edit/index.js';
 import { LinkIcon } from '../../icons/Link/index.js';
-import { Plus } from '../../icons/Plus/index.js';
-import { Swap } from '../../icons/Swap/index.js';
-import { X } from '../../icons/X/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { SwapIcon } from '../../icons/Swap/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { Popup } from '../Popup/index.js';
 import { Tooltip } from '../Tooltip/index.js';
+import './index.scss';
 const icons = {
-    chevron: Chevron,
-    edit: Edit,
-    link: LinkIcon,
-    plus: Plus,
-    swap: Swap,
-    x: X
+  chevron: ChevronIcon,
+  edit: EditIcon,
+  link: LinkIcon,
+  plus: PlusIcon,
+  swap: SwapIcon,
+  x: XIcon
 };
 const baseClass = 'btn';
-export const ButtonContents = ({ children, icon, showTooltip, tooltip })=>{
-    const BuiltInIcon = icons[icon];
-    return /*#__PURE__*/ React.createElement(Fragment, null, tooltip && /*#__PURE__*/ React.createElement(Tooltip, {
-        className: `${baseClass}__tooltip`,
-        show: showTooltip
-    }, tooltip), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__content`
-    }, children && /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__label`
-    }, children), icon && /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__icon`
-    }, /*#__PURE__*/ isValidElement(icon) && icon, BuiltInIcon && /*#__PURE__*/ React.createElement(BuiltInIcon, null))));
+export const ButtonContents = ({
+  children,
+  icon,
+  showTooltip,
+  tooltip
+}) => {
+  const BuiltInIcon = icons[icon];
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [tooltip && /*#__PURE__*/_jsx(Tooltip, {
+      className: `${baseClass}__tooltip`,
+      show: showTooltip,
+      children: tooltip
+    }), /*#__PURE__*/_jsxs("span", {
+      className: `${baseClass}__content`,
+      children: [children && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__label`,
+        children: children
+      }), icon && /*#__PURE__*/_jsxs("span", {
+        className: `${baseClass}__icon`,
+        children: [/*#__PURE__*/isValidElement(icon) && icon, BuiltInIcon && /*#__PURE__*/_jsx(BuiltInIcon, {})]
+      })]
+    })]
+  });
 };
-export const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, type = 'button', Link, 'aria-label': ariaLabel, buttonStyle = 'primary', children, className, disabled, el = 'button', icon, iconPosition = 'right', iconStyle = 'without-border', newTab, onClick, round, size = 'medium', to, tooltip, url } = props;
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const classes = [
-        baseClass,
-        className && className,
-        buttonStyle && `${baseClass}--style-${buttonStyle}`,
-        icon && `${baseClass}--icon`,
-        iconStyle && `${baseClass}--icon-style-${iconStyle}`,
-        icon && !children && `${baseClass}--icon-only`,
-        disabled && `${baseClass}--disabled`,
-        round && `${baseClass}--round`,
-        size && `${baseClass}--size-${size}`,
-        iconPosition && `${baseClass}--icon-position-${iconPosition}`,
-        tooltip && `${baseClass}--has-tooltip`
-    ].filter(Boolean).join(' ');
-    function handleClick(event) {
-        setShowTooltip(false);
-        if (type !== 'submit' && onClick) event.preventDefault();
-        if (onClick) onClick(event);
+export const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    id,
+    type = 'button',
+    'aria-label': ariaLabel,
+    buttonStyle = 'primary',
+    children,
+    className,
+    disabled,
+    el = 'button',
+    icon,
+    iconPosition = 'right',
+    iconStyle = 'without-border',
+    Link,
+    newTab,
+    onClick,
+    round,
+    size = 'medium',
+    SubMenuPopupContent,
+    to,
+    tooltip,
+    url
+  } = props;
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const classes = [baseClass, className && className, icon && `${baseClass}--icon`, iconStyle && `${baseClass}--icon-style-${iconStyle}`, icon && !children && `${baseClass}--icon-only`, size && `${baseClass}--size-${size}`, icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`, tooltip && `${baseClass}--has-tooltip`, !SubMenuPopupContent && `${baseClass}--withoutPopup`].filter(Boolean).join(' ');
+  function handleClick(event) {
+    setShowTooltip(false);
+    if (type !== 'submit' && onClick) {
+      event.preventDefault();
     }
-    const buttonProps = {
-        id,
-        type,
-        'aria-disabled': disabled,
-        'aria-label': ariaLabel,
-        className: classes,
-        disabled,
-        onClick: !disabled ? handleClick : undefined,
-        onMouseEnter: tooltip ? ()=>setShowTooltip(true) : undefined,
-        onMouseLeave: tooltip ? ()=>setShowTooltip(false) : undefined,
-        rel: newTab ? 'noopener noreferrer' : undefined,
-        target: newTab ? '_blank' : undefined
-    };
-    switch(el){
-        case 'link':
-            if (!Link) {
-                console.error('Link is required when using el="link"', children);
-                return null;
-            }
-            return /*#__PURE__*/ React.createElement(Link, {
-                ...buttonProps,
-                href: to || url,
-                to: to || url
-            }, /*#__PURE__*/ React.createElement(ButtonContents, {
-                icon: icon,
-                showTooltip: showTooltip,
-                tooltip: tooltip
-            }, children));
-        case 'anchor':
-            return /*#__PURE__*/ React.createElement("a", {
-                ...buttonProps,
-                href: url,
-                ref: ref
-            }, /*#__PURE__*/ React.createElement(ButtonContents, {
-                icon: icon,
-                showTooltip: showTooltip,
-                tooltip: tooltip
-            }, children));
-        default:
-            const Tag = el // eslint-disable-line no-case-declarations
-            ;
-            return /*#__PURE__*/ React.createElement(Tag, {
-                ref: ref,
-                type: "submit",
-                ...buttonProps
-            }, /*#__PURE__*/ React.createElement(ButtonContents, {
-                icon: icon,
-                showTooltip: showTooltip,
-                tooltip: tooltip
-            }, children));
+    if (onClick) {
+      onClick(event);
     }
+  }
+  const styleClasses = [buttonStyle && `${baseClass}--style-${buttonStyle}`, disabled && `${baseClass}--disabled`, round && `${baseClass}--round`, SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`].filter(Boolean).join(' ');
+  const buttonProps = {
+    id,
+    type,
+    'aria-disabled': disabled,
+    'aria-label': ariaLabel,
+    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,
+    disabled,
+    onClick: !disabled ? handleClick : undefined,
+    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,
+    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,
+    rel: newTab ? 'noopener noreferrer' : undefined,
+    target: newTab ? '_blank' : undefined
+  };
+  let buttonElement;
+  switch (el) {
+    case 'anchor':
+      buttonElement = /*#__PURE__*/_jsx("a", {
+        ...buttonProps,
+        href: !disabled ? url : undefined,
+        ref: ref,
+        children: /*#__PURE__*/_jsx(ButtonContents, {
+          icon: icon,
+          showTooltip: showTooltip,
+          tooltip: tooltip,
+          children: children
+        })
+      });
+      break;
+    case 'link':
+      if (!Link) {
+        console.error('Link is required when using el="link"', children);
+        return null;
+      }
+      let LinkTag = Link // eslint-disable-line no-case-declarations
+      ;
+      if (disabled) {
+        LinkTag = 'div';
+      }
+      buttonElement = /*#__PURE__*/_jsx(LinkTag, {
+        ...buttonProps,
+        href: to || url,
+        to: to || url,
+        children: /*#__PURE__*/_jsx(ButtonContents, {
+          icon: icon,
+          showTooltip: showTooltip,
+          tooltip: tooltip,
+          children: children
+        })
+      });
+      break;
+    default:
+      const Tag = el // eslint-disable-line no-case-declarations
+      ;
+      buttonElement = /*#__PURE__*/_jsx(Tag, {
+        ref: ref,
+        type: "submit",
+        ...buttonProps,
+        children: /*#__PURE__*/_jsx(ButtonContents, {
+          icon: icon,
+          showTooltip: showTooltip,
+          tooltip: tooltip,
+          children: children
+        })
+      });
+      break;
+  }
+  if (SubMenuPopupContent) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: styleClasses,
+      children: [buttonElement, /*#__PURE__*/_jsx(Popup, {
+        button: /*#__PURE__*/_jsx(ChevronIcon, {}),
+        buttonSize: size,
+        className: disabled ? `${baseClass}--popup-disabled` : '',
+        horizontalAlign: "right",
+        noBackground: true,
+        size: "large",
+        verticalAlign: "bottom",
+        children: SubMenuPopupContent
+      })]
+    });
+  }
+  return buttonElement;
 });
-
 //# sourceMappingURL=index.js.map

package/dist/elements/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, forwardRef, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { Edit } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { Plus } from '../../icons/Plus/index.js'\nimport { Swap } from '../../icons/Swap/index.js'\nimport { X } from '../../icons/X/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: Chevron,\n  edit: Edit,\n  link: LinkIcon,\n  plus: Plus,\n  swap: Swap,\n  x: X,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {\n  const {\n    id,\n    type = 'button',\n    Link,\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    newTab,\n    onClick,\n    round,\n    size = 'medium',\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    size && `${baseClass}--size-${size}`,\n    iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) event.preventDefault()\n    if (onClick) onClick(event)\n  }\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  switch (el) {\n    case 'link':\n      if (!Link) {\n        console.error('Link is required when using el=\"link\"', children)\n        return null\n      }\n\n      return (\n        <Link {...buttonProps} href={to || url} to={to || url}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n    case 'anchor':\n      return (\n        <a {...buttonProps} href={url} ref={ref as React.LegacyRef<HTMLAnchorElement>}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      return (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n  }\n})\n"],"names":["React","Fragment","forwardRef","isValidElement","Chevron","Edit","LinkIcon","Plus","Swap","X","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","className","show","span","Button","props","ref","id","type","Link","ariaLabel","buttonStyle","disabled","el","iconPosition","iconStyle","newTab","onClick","round","size","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","buttonProps","undefined","onMouseEnter","onMouseLeave","rel","target","console","error","href","a","Tag"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","ref","id","type","ariaLabel","buttonStyle","disabled","el","iconPosition","iconStyle","Link","newTab","onClick","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onMouseEnter","onMouseLeave","rel","target","buttonElement","href","console","error","LinkTag","Tag","button","buttonSize","horizontalAlign","noBackground","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef, Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    Link,\n    newTab,\n    onClick,\n    round,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  let buttonElement\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!disabled ? url : undefined}\n          ref={ref as React.Ref<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (!Link) {\n        console.error('Link is required when using el=\"link\"', children)\n        return null\n      }\n\n      let LinkTag = Link // eslint-disable-line no-case-declarations\n\n      if (disabled) {\n        LinkTag = 'div'\n      }\n\n      buttonElement = (\n        <LinkTag {...buttonProps} href={to || url} to={to || url}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </LinkTag>\n      )\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon />}\n          buttonSize={size}\n          className={disabled ? `${baseClass}--popup-disabled` : ''}\n          horizontalAlign=\"right\"\n          noBackground\n          size=\"large\"\n          verticalAlign=\"bottom\"\n        >\n          {SubMenuPopupContent}\n        </Popup>\n      </div>\n    )\n  }\n\n  return buttonElement\n})\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,UAAU,EAAEC,QAAQ,EAAEC,cAAc,QAAQ;AAI5D,SAASC,WAAW,QAAQ;AAC5B,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,KAAK,QAAQ;AACtB,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,KAAA,GAAQ;EACZC,OAAA,EAAST,WAAA;EACTU,IAAA,EAAMT,QAAA;EACNU,IAAA,EAAMT,QAAA;EACNU,IAAA,EAAMT,QAAA;EACNU,IAAA,EAAMT,QAAA;EACNU,CAAA,EAAGT;AACL;AAEA,MAAMU,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAAiBA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,WAAW;EAAEC;AAAO,CAAE;EACrE,MAAMC,WAAA,GAAcb,KAAK,CAACU,IAAA,CAAK;EAE/B,oBACEI,KAAA,CAACxB,QAAA;eACEsB,OAAA,iBACCG,IAAA,CAAChB,OAAA;MAAQiB,SAAA,EAAW,GAAGT,SAAA,WAAoB;MAAEU,IAAA,EAAMN,WAAA;gBAChDC;qBAGLE,KAAA,CAAC;MAAKE,SAAA,EAAW,GAAGT,SAAA,WAAoB;iBACrCE,QAAA,iBAAYM,IAAA,CAAC;QAAKC,SAAA,EAAW,GAAGT,SAAA,SAAkB;kBAAGE;UACrDC,IAAA,iBACCI,KAAA,CAAC;QAAKE,SAAA,EAAW,GAAGT,SAAA,QAAiB;gCAClChB,cAAA,CAAemB,IAAA,KAASA,IAAA,EACxBG,WAAA,iBAAeE,IAAA,CAACF,WAAA;;;;AAM7B;AAEA,OAAO,MAAMK,MAAA,gBAAS7B,UAAA,CAAyD,CAAC8B,KAAA,EAAOC,GAAA;EACrF,MAAM;IACJC,EAAE;IACFC,IAAA,GAAO,QAAQ;IACf,cAAcC,SAAS;IACvBC,WAAA,GAAc,SAAS;IACvBf,QAAQ;IACRO,SAAS;IACTS,QAAQ;IACRC,EAAA,GAAK,QAAQ;IACbhB,IAAI;IACJiB,YAAA,GAAe,OAAO;IACtBC,SAAA,GAAY,gBAAgB;IAC5BC,IAAI;IACJC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAA,GAAO,QAAQ;IACfC,mBAAmB;IACnBC,EAAE;IACFvB,OAAO;IACPwB;EAAG,CACJ,GAAGjB,KAAA;EAEJ,MAAM,CAACR,WAAA,EAAa0B,cAAA,CAAe,GAAGjD,KAAA,CAAMkD,QAAQ,CAAC;EAErD,MAAMC,OAAA,GAAU,CACdhC,SAAA,EACAS,SAAA,IAAaA,SAAA,EACbN,IAAA,IAAQ,GAAGH,SAAA,QAAiB,EAC5BqB,SAAA,IAAa,GAAGrB,SAAA,gBAAyBqB,SAAA,EAAW,EACpDlB,IAAA,IAAQ,CAACD,QAAA,IAAY,GAAGF,SAAA,aAAsB,EAC9C0B,IAAA,IAAQ,GAAG1B,SAAA,UAAmB0B,IAAA,EAAM,EACpCvB,IAAA,IAAQiB,YAAA,IAAgB,GAAGpB,SAAA,mBAA4BoB,YAAA,EAAc,EACrEf,OAAA,IAAW,GAAGL,SAAA,eAAwB,EACtC,CAAC2B,mBAAA,IAAuB,GAAG3B,SAAA,gBAAyB,CACrD,CACEiC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,SAASC,YAAYC,KAAK;IACxBP,cAAA,CAAe;IACf,IAAIf,IAAA,KAAS,YAAYS,OAAA,EAAS;MAChCa,KAAA,CAAMC,cAAc;IACtB;IACA,IAAId,OAAA,EAAS;MACXA,OAAA,CAAQa,KAAA;IACV;EACF;EAEA,MAAME,YAAA,GAAe,CACnBtB,WAAA,IAAe,GAAGjB,SAAA,WAAoBiB,WAAA,EAAa,EACnDC,QAAA,IAAY,GAAGlB,SAAA,YAAqB,EACpCyB,KAAA,IAAS,GAAGzB,SAAA,SAAkB,EAC9B2B,mBAAA,GAAsB,GAAG3B,SAAA,aAAsB,GAAG,GAAGA,SAAA,gBAAyB,CAC/E,CACEiC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMK,WAAA,GAAc;IAClB1B,EAAA;IACAC,IAAA;IACA,iBAAiBG,QAAA;IACjB,cAAcF,SAAA;IACdP,SAAA,EAAW,CAACkB,mBAAA,GAAsB,CAACK,OAAA,EAASO,YAAA,CAAa,CAACJ,IAAI,CAAC,OAAOH,OAAA;IACtEd,QAAA;IACAM,OAAA,EAAS,CAACN,QAAA,GAAWkB,WAAA,GAAcK,SAAA;IACnCC,YAAA,EAAcrC,OAAA,GAAU,MAAMyB,cAAA,CAAe,QAAQW,SAAA;IACrDE,YAAA,EAActC,OAAA,GAAU,MAAMyB,cAAA,CAAe,SAASW,SAAA;IACtDG,GAAA,EAAKrB,MAAA,GAAS,wBAAwBkB,SAAA;IACtCI,MAAA,EAAQtB,MAAA,GAAS,WAAWkB;EAC9B;EAEA,IAAIK,aAAA;EAEJ,QAAQ3B,EAAA;IACN,KAAK;MACH2B,aAAA,gBACEtC,IAAA,CAAC;QACE,GAAGgC,WAAW;QACfO,IAAA,EAAM,CAAC7B,QAAA,GAAWW,GAAA,GAAMY,SAAA;QACxB5B,GAAA,EAAKA,GAAA;kBAEL,aAAAL,IAAA,CAACP,cAAA;UAAeE,IAAA,EAAMA,IAAA;UAAMC,WAAA,EAAaA,WAAA;UAAaC,OAAA,EAASA,OAAA;oBAC5DH;;;MAIP;IAEF,KAAK;MACH,IAAI,CAACoB,IAAA,EAAM;QACT0B,OAAA,CAAQC,KAAK,CAAC,yCAAyC/C,QAAA;QACvD,OAAO;MACT;MAEA,IAAIgD,OAAA,GAAU5B,IAAA,CAAK;MAAA;MAEnB,IAAIJ,QAAA,EAAU;QACZgC,OAAA,GAAU;MACZ;MAEAJ,aAAA,gBACEtC,IAAA,CAAC0C,OAAA;QAAS,GAAGV,WAAW;QAAEO,IAAA,EAAMnB,EAAA,IAAMC,GAAA;QAAKD,EAAA,EAAIA,EAAA,IAAMC,GAAA;kBACnD,aAAArB,IAAA,CAACP,cAAA;UAAeE,IAAA,EAAMA,IAAA;UAAMC,WAAA,EAAaA,WAAA;UAAaC,OAAA,EAASA,OAAA;oBAC5DH;;;MAIP;IAEF;MACE,MAAMiD,GAAA,GAAMhC,EAAA,CAAG;MAAA;MAEf2B,aAAA,gBACEtC,IAAA,CAAC2C,GAAA;QAAItC,GAAA,EAAKA,GAAA;QAAKE,IAAA,EAAK;QAAU,GAAGyB,WAAW;kBAC1C,aAAAhC,IAAA,CAACP,cAAA;UAAeE,IAAA,EAAMA,IAAA;UAAMC,WAAA,EAAaA,WAAA;UAAaC,OAAA,EAASA,OAAA;oBAC5DH;;;MAIP;EACJ;EACA,IAAIyB,mBAAA,EAAqB;IACvB,oBACEpB,KAAA,CAAC;MAAIE,SAAA,EAAW8B,YAAA;iBACbO,aAAA,E,aACDtC,IAAA,CAACjB,KAAA;QACC6D,MAAA,eAAQ5C,IAAA,CAACvB,WAAA;QACToE,UAAA,EAAY3B,IAAA;QACZjB,SAAA,EAAWS,QAAA,GAAW,GAAGlB,SAAA,kBAA2B,GAAG;QACvDsD,eAAA,EAAgB;QAChBC,YAAY;QACZ7B,IAAA,EAAK;QACL8B,aAAA,EAAc;kBAEb7B;;;EAIT;EAEA,OAAOmB,aAAA;AACT","ignoreList":[]}

package/dist/elements/Button/index.scss

@@ -4,24 +4,150 @@ a.btn {
   display: inline-block;
 }
 
+.btn--withPopup {
+  margin-block: 24px;
+  .btn {
+    margin: 0;
+  }
+}
+
 .btn {
-  background: transparent;
-  line-height: base(1);
-  border-radius: $style-radius-m;
-  font-size: 1rem;
-  margin-top: base(1);
-  margin-bottom: base(1);
+  // colors
+  &--style-primary {
+    --color: var(--theme-elevation-0);
+    --bg-color: var(--theme-elevation-800);
+    --box-shadow: none;
+    --hover-bg: var(--theme-elevation-600);
+    --hover-color: var(--color);
+
+    &.btn--disabled {
+      --bg-color: var(--theme-elevation-200);
+      --color: var(--theme-elevation-800);
+      --hover-bg: var(--bg-color);
+      --hover-color: var(--color);
+    }
+  }
+
+  &--style-secondary {
+    --color: var(--theme-text);
+    --bg-color: transparent;
+    --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
+    --hover-color: var(--theme-elevation-600);
+    --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);
+
+    &.btn--disabled {
+      --color: var(--theme-elevation-200);
+      --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+      --hover-color: var(--color);
+    }
+  }
+
+  &--style-pill {
+    --bg-color: var(--theme-elevation-150);
+    --color: var(--theme-elevation-800);
+    --hover-color: var(--color);
+    --hover-bg: var(--theme-elevation-100);
+
+    &.btn--disabled {
+      --color: var(--theme-elevation-600);
+      --hover-bg: var(--bg-color);
+      --hover-color: var(--color);
+    }
+  }
+}
+
+.btn--withPopup {
+  .popup-button {
+    color: var(--color, inherit);
+    background-color: var(--bg-color);
+    box-shadow: var(--box-shadow);
+    border-radius: $style-radius-m;
+    border-left: 1px solid var(--theme-bg);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    align-items: center;
+
+    &:hover,
+    &:focus-visible,
+    &:focus,
+    &:active {
+      background-color: var(--hover-bg);
+      color: var(--hover-color);
+      box-shadow: var(--hover-box-shadow);
+    }
+  }
+}
+
+.btn,
+.btn--withPopup .btn {
+  &:hover,
+  &:focus-visible,
+  &:focus,
+  &:active {
+    color: var(--hover-color);
+    box-shadow: var(--hover-box-shadow);
+    background-color: var(--hover-bg);
+  }
+}
+
+.btn--disabled,
+.btn--disabled .btn {
+  cursor: not-allowed;
+}
+
+.btn {
+  border-radius: $style-radius-s;
+  font-size: var(--base-body-size);
+  margin-block: base(1.2);
+  line-height: base(1.2);
   border: 0;
   cursor: pointer;
   font-weight: normal;
   text-decoration: none;
-  text-align: center;
-  color: inherit;
+  transition-property: border, color, box-shadow, background;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+  color: var(--color, inherit);
+  background-color: var(--bg-color, transparent);
+  box-shadow: var(--box-shadow, none);
+
+  .icon {
+    @include color-svg(var(--color, currentColor));
+    width: 100%;
+    height: 100%;
+  }
 
-  .btn__icon {
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon {
+    width: base(1.2);
+    height: base(1.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border: 1px solid;
     border-radius: 100%;
-    @include color-svg(currentColor);
+    padding: base(0.1);
+    color: inherit;
+
+    .icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    &.btn--size-small {
+      padding: base(0.2);
+    }
+  }
+
+  &--withPopup {
+    display: flex;
   }
 
   &--has-tooltip {
@@ -40,158 +166,88 @@ a.btn {
     }
   }
 
-  span {
-    line-height: base(1);
-  }
-
-  span,
-  svg {
-    vertical-align: top;
-  }
-
-  &--size-medium {
-    padding: base(0.5) $baseline;
-  }
-
   &--size-small {
-    padding: base(0.25) base(0.5);
-  }
+    padding: 0 base(0.4);
 
-  &--style-primary {
-    background-color: var(--theme-elevation-800);
-    color: var(--theme-elevation-0);
+    &.btn--icon-position-left {
+      padding-inline-start: base(0.1);
+      padding-inline-end: base(0.4);
 
-    &.btn--disabled {
-      background-color: var(--theme-elevation-400);
-    }
-
-    &:not(.btn--disabled) {
-      &:hover,
-      &:focus-visible {
-        background: var(--theme-elevation-750);
-      }
-
-      &:active {
-        background: var(--theme-elevation-700);
+      .btn__content {
+        flex-direction: row-reverse;
       }
     }
 
-    &:focus:not(:focus-visible) {
-      box-shadow: $focus-box-shadow;
-      outline: none;
+    &.btn--icon-position-right {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.1);
     }
   }
 
-  &--style-secondary {
-    $base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
-    $hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700);
-
-    box-shadow: $base-box-shadow;
-    color: var(--theme-elevation-800);
-    background: none;
-    backdrop-filter: blur(5px);
+  &--size-medium {
+    padding: base(0.2) base(0.6);
 
-    &:hover,
-    &:focus-visible {
-      background: var(--theme-elevation-100);
-      box-shadow: $hover-box-shadow;
-    }
+    &.btn--icon-position-left {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.6);
 
-    &:active {
-      background: var(--theme-elevation-200);
+      .btn__content {
+        gap: base(0.2);
+        flex-direction: row-reverse;
+      }
     }
 
-    &.btn--disabled {
-      color: var(--theme-elevation-400);
-      background: none;
-      box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
-    }
+    &.btn--icon-position-right {
+      padding-inline-start: base(0.6);
+      padding-inline-end: base(0.4);
 
-    &:focus:not(:focus-visible) {
-      outline: none;
-      box-shadow: $hover-box-shadow, $focus-box-shadow;
+      .btn__content {
+        gap: base(0.2);
+      }
     }
   }
 
-  &--style-none {
-    padding: 0;
-    margin: 0;
-    border-radius: 0;
+  &--size-large {
+    padding: base(0.4) base(0.8);
 
-    &:focus {
-      opacity: 0.8;
-    }
+    &.btn--icon-position-left {
+      padding-inline-start: base(0.6);
+      padding-inline-end: base(0.8);
 
-    &:active {
-      opacity: 0.7;
+      .btn__content {
+        gap: base(0.4);
+        flex-direction: row-reverse;
+      }
     }
-  }
 
-  &--round {
-    border-radius: 100%;
-  }
+    &.btn--icon-position-right {
+      padding-inline-start: base(0.8);
+      padding-inline-end: base(0.6);
 
-  [dir='rtl'] &--icon {
-    span {
-      margin-left: 5px;
+      .btn__content {
+        gap: base(0.4);
+      }
     }
   }
 
-  &--icon {
-    span {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    &.btn--style-primary {
-      .icon {
-        @include color-svg(var(--theme-elevation-0));
-      }
-    }
+  &--withPopup .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  &--style-icon-label {
+  &--style-icon-label,
+  &--style-icon-label.btn--icon-position-left,
+  &--style-icon-label.btn--icon-position-right {
     padding: 0;
     font-weight: 600;
-  }
 
-  &--style-light-gray {
-    box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
-  }
-
-  &--icon-position-left {
     .btn__content {
-      flex-direction: row-reverse;
-    }
-
-    .btn__icon {
-      margin-right: base(0.5);
+      gap: base(0.4);
     }
   }
 
-  &--icon-position-right {
-    .btn__icon {
-      margin-left: base(0.5);
-    }
-  }
-
-  &--icon-only {
-    .btn__icon {
-      padding: 0;
-      margin: 0;
-    }
-  }
-
-  &--disabled {
-    cursor: default;
-  }
-
-  &:hover,
-  &:focus-visible {
-    .btn__icon {
-      @include color-svg(var(--theme-elevation-0));
-      background: var(--theme-elevation-800);
-    }
+  &--style-none {
+    padding: 0;
   }
 
   &:focus:not(:focus-visible) {
@@ -214,4 +270,8 @@ a.btn {
     outline: var(--accessibility-outline);
     outline-offset: var(--accessibility-outline-offset);
   }
+
+  &.btn--disabled {
+    cursor: not-allowed;
+  }
 }