@redneckz/wildless-cms-uni-blocks 0.2.71 → 0.2.74

package/src/ui-kit/Button.tsx

@@ -1,13 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ButtonVersion, LinkContent } from '../types';
-
-export interface ButtonProps extends LinkContent {
-  className?: string;
-  onClick?: (ev: MouseEvent) => any;
-  version?: ButtonVersion;
-  ariaLabel?: string;
-  disabled?: Boolean;
-}
+import type { ButtonVersion } from '../model/ButtonVersion';
+import type { ButtonInnerProps, ButtonProps } from './ButtonProps';
 
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -20,20 +13,28 @@ const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: 'bg-secondary-light text-secondary-text',
 };
 
-const styleButton = 'inline-block rounded-md px-8 py-2 text-center font-sans';
+const styleButton = 'inline-block text-center font-sans select-none';
 
 export const Button = JSX<ButtonProps>(
   ({
     className,
     text,
+    aboveText,
+    appendLeft,
     href,
     target,
     onClick,
     children,
     disabled,
-    version = 'primary',
+    rounded,
+    version = 'none',
     ariaLabel,
+    ...rest
   }) => {
+    const buttonInner = children ?? (
+      <ButtonInner text={text} aboveText={aboveText} appendLeft={appendLeft} rounded={rounded} />
+    );
+
     if (disabled) {
       return (
         <div
@@ -41,33 +42,49 @@ export const Button = JSX<ButtonProps>(
           aria-disabled="true"
           aria-label={ariaLabel}
           tabIndex="-1"
-          className={`${styleButton} select-none ${buttonDisabledStyleMap[version]} ${
-            className || ''
-          }`}
+          className={`${styleButton} ${buttonDisabledStyleMap[version] || ''} ${
+            rounded ? 'rounded-full' : 'rounded-md'
+          } ${className || ''}`}
         >
-          {children ? (
-            <div>{children}</div>
-          ) : (
-            <div className="text-sm font-medium py-1.5">{text}</div>
-          )}
+          {buttonInner}
         </div>
       );
     }
 
     return (
       <a
-        className={`${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`}
+        className={`${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${
+          rounded ? 'rounded-full' : 'rounded-md'
+        } ${className || ''}`}
         href={href}
         target={target}
         onClick={onClick}
         aria-label={ariaLabel}
+        role={!href ? 'button' : 'link'}
+        {...rest}
       >
-        {children ? (
-          <div>{children}</div>
-        ) : (
-          <div className="text-sm font-medium py-1.5">{text}</div>
-        )}
+        {buttonInner}
       </a>
     );
   },
 );
+
+export const ButtonInner = JSX<ButtonInnerProps>(({ text, aboveText, appendLeft, rounded }) => {
+  const withoutText = !text && !aboveText && Boolean(appendLeft);
+
+  const buttonInnerClasses = `flex items-center justify-center ${
+    withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`
+  } ${rounded ? 'rounded-full' : ''}`;
+
+  return (
+    <div className={buttonInnerClasses}>
+      {appendLeft ? appendLeft : null}
+      {!withoutText ? (
+        <div>
+          <div className="text-xxs text-left">{aboveText}</div>
+          <div className="text-sm font-medium text-left">{text}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+});

package/src/ui-kit/ButtonProps.ts

@@ -0,0 +1,24 @@
+import type { ButtonVersion } from '../model/ButtonVersion';
+import type { LinkContent } from '../model/LinkContent';
+import { IconName } from './IconProps';
+
+export interface ButtonInnerProps {
+  text?: string;
+  aboveText?: string;
+  appendLeft?: any;
+  rounded?: boolean;
+}
+
+export interface ButtonProps extends LinkContent, ButtonInnerProps {
+  className?: string;
+  version?: ButtonVersion;
+  disabled?: boolean;
+  rel?: string;
+  ariaLabel?: string;
+  /** @hidden */
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export interface ButtonWithIconProps extends ButtonProps {
+  icon?: IconName;
+}

package/src/ui-kit/Icon.fixture.tsx

@@ -0,0 +1,22 @@
+import '../setup-fixture';
+import { Icon } from './Icon';
+
+import { IconMap } from './IconProps';
+import type { IconName } from './IconProps';
+
+export default {
+  all: (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-6 gap-8">
+        {(Object.keys(IconMap) as Array<IconName>)
+          .filter((v) => isNaN(Number(v)))
+          .map((icon, i) => (
+            <div key={String(i)} className="flex flex-col items-center gap-3">
+              <div>{icon}</div>
+              <Icon name={icon} width="64" />
+            </div>
+          ))}
+      </div>
+    </div>
+  ),
+};

package/src/ui-kit/Icon.tsx

@@ -1,37 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { projectSettings } from '../ProjectSettings';
-
-export type IconName =
-  | 'ActualBalanceIcon'
-  | 'AppleIcon'
-  | 'CalendarIcon'
-  | 'ClockIcon'
-  | 'ComfortableCompIcon'
-  | 'DollarIcon'
-  | 'EmptyWalletIcon'
-  | 'EuroIcon'
-  | 'GridIcon'
-  | 'LoupeIcon'
-  | 'NewDocIcon'
-  | 'OkIcon'
-  | 'PassSendIcon'
-  | 'PercentageSquareIcon'
-  | 'PlayMarketIcon'
-  | 'ProfileIcon'
-  | 'SignDocsIcon'
-  | 'TelegramIcon'
-  | 'VKIcon'
-  | 'ArrowLeftIcon';
-
-export interface IconProps {
-  className?: string;
-  name: IconName;
-  alt?: string;
-  title?: string;
-  width?: string;
-  height?: string;
-  'aria-hidden'?: 'true';
-}
+import type { IconProps } from './IconProps';
 
 export const Icon = JSX<IconProps>(
   ({ className, name, alt = `Icon ${name}`, title = alt, ...imgProps }) => (

package/src/ui-kit/IconProps.ts

@@ -0,0 +1,34 @@
+export enum IconMap {
+  'ActualBalanceIcon',
+  'AppleIcon',
+  'CalendarIcon',
+  'ClockIcon',
+  'ComfortableCompIcon',
+  'DollarIcon',
+  'EmptyWalletIcon',
+  'EuroIcon',
+  'GridIcon',
+  'LoupeIcon',
+  'NewDocIcon',
+  'OkIcon',
+  'PassSendIcon',
+  'PercentageSquareIcon',
+  'PlayMarketIcon',
+  'ProfileIcon',
+  'SignDocsIcon',
+  'TelegramIcon',
+  'VKIcon',
+  'GlassIcon',
+}
+
+export type IconName = keyof typeof IconMap;
+
+export interface IconProps {
+  className?: string;
+  name: IconName;
+  alt?: string;
+  title?: string;
+  width?: string;
+  height?: string;
+  'aria-hidden'?: 'true';
+}

package/src/{Img.tsx → ui-kit/Img.tsx}

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from './types';
+import type { ImgSource, Picture } from '../model/Picture';
 
 export interface TextWithImageProps {
   className?: string;

package/src/ui-kit/SVG.tsx

@@ -17,12 +17,21 @@ export interface SVGProps extends SVGPathOptions {
   className?: string;
   viewBox?: string;
   paths: SVGPath[];
+  width?: string;
+  height?: string;
 }
 
 export const SVG = JSX<SVGProps>(
-  ({ className, viewBox, fill = 'none', paths, ...commonOptions }) => {
+  ({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" className={className} viewBox={viewBox} fill={fill}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        viewBox={viewBox}
+        fill={fill}
+        width={width}
+        height={height}
+      >
         {paths.map(({ d, fill, ...options }, i) => (
           <path key={i} d={d} fill={fill || 'currentColor'} {...commonOptions} {...options} />
         ))}

package/src/ui-kit/Title.tsx

@@ -1,17 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-export enum SizeTableClass {
-  'XL' = 'text-title-lg',
-  'L' = 'text-title',
-  'M' = 'text-title-sm',
-  'S' = 'text-title-xs',
-}
-
-export type TitleSize = keyof typeof SizeTableClass;
-
-export interface TitleProps extends Partial<HTMLHeadingElement> {
-  size?: TitleSize;
-}
+import { SizeTableClass, TitleProps } from './TitleProps';
 
 export const Title = JSX<TitleProps>(({ size = 'L', className, children, ...rest }) => {
   const Tag = size === 'XL' ? 'h1' : 'h2';

package/src/ui-kit/TitleProps.ts

@@ -0,0 +1,12 @@
+export enum SizeTableClass {
+  'XL' = 'text-title-lg',
+  'L' = 'text-title',
+  'M' = 'text-title-sm',
+  'S' = 'text-title-xs',
+}
+
+export type TitleSize = keyof typeof SizeTableClass;
+
+export interface TitleProps extends Partial<HTMLHeadingElement> {
+  size?: TitleSize;
+}

package/src/ui-kit/TopItem.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkContent } from '../types';
+import type { LinkContent } from '../model/LinkContent';
 
 export interface TopItemContent extends LinkContent {
   active?: boolean;

package/src/useLink.ts

@@ -1,5 +1,5 @@
 import { HandlerDecorator, Router } from './ContentPageContext';
-import type { LinkContent } from './types';
+import type { LinkContent } from './model/LinkContent';
 import { adjustHref, isURL } from './utils/url';
 
 const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
@@ -9,7 +9,7 @@ export function useLink(
     router,
     handlerDecorator = defaultHandlerDecorator,
   }: { router: Router; handlerDecorator?: HandlerDecorator },
-  link: Partial<LinkContent>,
+  link: Partial<LinkContent & { className: string }>,
 ) {
   const href = adjustHref(link.href, router);
   return {

package/src/useSitemap.ts

@@ -1,5 +1,5 @@
 import type { AsyncDataHook } from './ContentPageContext';
-import type { HeaderContent } from './Header/index';
+import type { HeaderContent } from './Header/HeaderContent';
 import { projectSettings } from './ProjectSettings';
 
 export function useSitemap(useAsyncData: AsyncDataHook): HeaderContent {

package/dist/Footer/index.d.ts

@@ -1,2 +0,0 @@
-export { Footer } from './Footer';
-export type { FooterContent, FooterProps } from './Footer';

package/dist/Footer/index.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
-var Footer_1 = require("./Footer");
-Object.defineProperty(exports, "Footer", { enumerable: true, get: function () { return Footer_1.Footer; } });
-//# sourceMappingURL=index.js.map

package/dist/Footer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Footer/index.ts"],"names":[],"mappings":";;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/dist/Header/index.d.ts

@@ -1,3 +0,0 @@
-export { Header } from './Header';
-export type { HeaderProps } from './Header';
-export type { HeaderContent } from './HeaderContent';

package/dist/Header/index.js

@@ -1,5 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-var Header_1 = require("./Header");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_1.Header; } });
-//# sourceMappingURL=index.js.map

package/dist/Header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Header/index.ts"],"names":[],"mappings":";;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/dist/Img.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Img.js","sourceRoot":"","sources":["../src/Img.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AAQ3B,QAAA,GAAG,GAAG,IAAA,aAAG,EAAqB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACnE,qCAAS,SAAS,EAAE,GAAG,SAAS,IAAI,EAAE,EAAE,aACrC,KAAK,CAAC,OAAO,EAAE,MAAM;YACpB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,mCAAgC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,IAA9D,GAAG,KAAK,IAAI,GAAG,EAAE,CAAiD,CAChF,CAAC;YACJ,CAAC,CAAC,IAAI,EACR,gCAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,KAAM,KAAK,EAAE,IAAI,GAAI,IACnF,CACX,CAAC,CAAC;AAEH,SAAgB,gBAAgB,CAAC,MAA2B;IAC1D,OAAO,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC;AAFD,4CAEC"}

package/dist/ui-kit/IconButton.d.ts

@@ -1,7 +0,0 @@
-import type { ButtonProps } from './Button';
-import { IconName } from './Icon';
-export interface IconButtonProps extends ButtonProps {
-    icon?: IconName;
-    aboveText?: string;
-}
-export declare const IconButton: (props: import("@redneckz/uni-jsx").PropsWithChildren<IconButtonProps, any>, context?: any) => any;

package/dist/ui-kit/IconButton.js

@@ -1,10 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
-const uni_jsx_1 = require("@redneckz/uni-jsx");
-const Button_1 = require("./Button");
-const Icon_1 = require("./Icon");
-exports.IconButton = (0, uni_jsx_1.JSX)((props) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.icon ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mr-2", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: props.icon, width: "24", height: "24" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xxs text-left", children: props.aboveText }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-left", children: props.text })] })] })) : null }));
-});
-//# sourceMappingURL=IconButton.js.map

package/dist/ui-kit/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/ui-kit/IconButton.tsx"],"names":[],"mappings":";;;AAAA,+CAAwC;AAExC,qCAAkC;AAClC,iCAAwC;AAO3B,QAAA,UAAU,GAAG,IAAA,aAAG,EAAkB,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CACL,uBAAC,eAAM,OAAK,KAAK,YACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,iCAAK,SAAS,EAAC,mBAAmB,aAChC,gCAAK,SAAS,EAAC,MAAM,YACnB,uBAAC,WAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC7C,EACN,4CACE,gCAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,SAAS,GAAO,EAC3D,gCAAK,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAO,IAC7D,IACF,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/Footer/index.d.ts

@@ -1,2 +0,0 @@
-export { Footer } from './Footer';
-export type { FooterContent, FooterProps } from './Footer';

package/lib/Footer/index.js

@@ -1,2 +0,0 @@
-export { Footer } from './Footer.js';
-//# sourceMappingURL=index.js.map

package/lib/Footer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/lib/Header/index.d.ts

@@ -1,3 +0,0 @@
-export { Header } from './Header';
-export type { HeaderProps } from './Header';
-export type { HeaderContent } from './HeaderContent';

package/lib/Header/index.js

@@ -1,2 +0,0 @@
-export { Header } from './Header.js';
-//# sourceMappingURL=index.js.map

package/lib/Header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/lib/Img.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Img.js","sourceRoot":"","sources":["../src/Img.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAQxC,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAqB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACnE,mBAAS,SAAS,EAAE,GAAG,SAAS,IAAI,EAAE,EAAE,aACrC,KAAK,CAAC,OAAO,EAAE,MAAM;YACpB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,iBAAgC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,IAA9D,GAAG,KAAK,IAAI,GAAG,EAAE,CAAiD,CAChF,CAAC;YACJ,CAAC,CAAC,IAAI,EACR,cAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,KAAM,KAAK,EAAE,IAAI,GAAI,IACnF,CACX,CAAC,CAAC;AAEH,MAAM,UAAU,gBAAgB,CAAC,MAA2B;IAC1D,OAAO,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC"}

package/lib/ui-kit/IconButton.d.ts

@@ -1,7 +0,0 @@
-import type { ButtonProps } from './Button';
-import { IconName } from './Icon';
-export interface IconButtonProps extends ButtonProps {
-    icon?: IconName;
-    aboveText?: string;
-}
-export declare const IconButton: (props: import("@redneckz/uni-jsx").PropsWithChildren<IconButtonProps, any>, context?: any) => any;

package/lib/ui-kit/IconButton.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
-import { JSX } from '@redneckz/uni-jsx';
-import { Button } from './Button.js';
-import { Icon } from './Icon.js';
-export const IconButton = JSX((props) => {
-    return (_jsx(Button, { ...props, children: props.icon ? (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-2", children: _jsx(Icon, { name: props.icon, width: "24", height: "24" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-xxs text-left", children: props.aboveText }), _jsx("div", { className: "text-sm font-medium text-left", children: props.text })] })] })) : null }));
-});
-//# sourceMappingURL=IconButton.js.map

package/lib/ui-kit/IconButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/ui-kit/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAY,MAAM,QAAQ,CAAC;AAOxC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAkB,CAAC,KAAK,EAAE,EAAE;IACvD,OAAO,CACL,KAAC,MAAM,OAAK,KAAK,YACd,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,GAC7C,EACN,0BACE,cAAK,SAAS,EAAC,oBAAoB,YAAE,KAAK,CAAC,SAAS,GAAO,EAC3D,cAAK,SAAS,EAAC,+BAA+B,YAAE,KAAK,CAAC,IAAI,GAAO,IAC7D,IACF,CACP,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/src/Footer/index.ts

@@ -1,2 +0,0 @@
-export { Footer } from './Footer';
-export type { FooterContent, FooterProps } from './Footer';

package/src/Header/index.ts

@@ -1,3 +0,0 @@
-export { Header } from './Header';
-export type { HeaderProps } from './Header';
-export type { HeaderContent } from './HeaderContent';

package/src/ui-kit/IconButton.tsx

@@ -1,27 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
-import { Icon, IconName } from './Icon';
-
-export interface IconButtonProps extends ButtonProps {
-  icon?: IconName;
-  aboveText?: string;
-}
-
-export const IconButton = JSX<IconButtonProps>((props) => {
-  return (
-    <Button {...props}>
-      {props.icon ? (
-        <div className="flex items-center">
-          <div className="mr-2">
-            <Icon name={props.icon} width="24" height="24" />
-          </div>
-          <div>
-            <div className="text-xxs text-left">{props.aboveText}</div>
-            <div className="text-sm font-medium text-left">{props.text}</div>
-          </div>
-        </div>
-      ) : null}
-    </Button>
-  );
-});