@popsure/dirty-swan 0.44.1 → 0.45.0-alpha

package/dist/cjs/lib/components/button/index.d.ts

@@ -1,6 +1,9 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ElementType, ComponentProps, ReactNode } from 'react';
 declare type ButtonVariant = 'filledColor' | 'filledGray' | 'filledWhite' | 'textColor' | 'textWhite' | 'outlineWhite' | 'filledSuccess' | 'filledError';
-declare type ButtonProps = {
+declare const buttonDefaultAs: "button";
+declare type ButtonDefaultAsType = typeof buttonDefaultAs;
+declare type ButtonOwnProps<E> = {
+    as?: E;
     children: ReactNode;
     variant?: ButtonVariant;
     leftIcon?: ReactElement;
@@ -8,13 +11,15 @@ declare type ButtonProps = {
     loading?: boolean;
     hideLabel?: boolean;
 } & Omit<JSX.IntrinsicElements['button'], 'children'>;
+export declare type ButtonProps<E extends ElementType = ButtonDefaultAsType> = ButtonOwnProps<E> & Omit<ComponentProps<E>, keyof ButtonOwnProps<E>>;
 declare const Button: React.ForwardRefExoticComponent<Pick<{
+    as?: React.ElementType<any> | undefined;
     children: ReactNode;
     variant?: ButtonVariant | undefined;
     leftIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     rightIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     loading?: boolean | undefined;
     hideLabel?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | "loading" | "variant"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & Omit<any, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | keyof React.ClassAttributes<HTMLButtonElement> | "as" | "variant" | "loading">, string | number | symbol> & React.RefAttributes<"symbol" | "object" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">>;
 export { Button };
-export type { ButtonProps, ButtonVariant };
+export type { ButtonVariant };

package/dist/cjs/lib/components/button/index.stories.d.ts

@@ -3,14 +3,21 @@ import { ButtonProps, ButtonVariant } from '.';
 declare const story: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<{
+        as?: import("react").ElementType<any> | undefined;
         children: import("react").ReactNode;
         variant?: ButtonVariant | undefined;
         leftIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         rightIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         loading?: boolean | undefined;
         hideLabel?: boolean | undefined;
-    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | "loading" | "variant"> & import("react").RefAttributes<HTMLButtonElement>>;
+    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & Omit<any, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | keyof import("react").ClassAttributes<HTMLButtonElement> | "as" | "variant" | "loading">, string | number | symbol> & import("react").RefAttributes<"symbol" | "object" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">>;
     argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         children: {
             control: {
                 type: string;
@@ -50,7 +57,7 @@ declare const story: {
     };
 };
 export declare const ButtonStory: {
-    ({ className, loading, children, variant, hideLabel }: ButtonProps): JSX.Element;
+    ({ as, className, loading, children, variant, hideLabel }: ButtonProps): JSX.Element;
     storyName: string;
 };
 export declare const ButtonVariants: ({ children, onClick }: ButtonProps) => JSX.Element;
@@ -59,4 +66,5 @@ export declare const ButtonWithIcons: ({ children, onClick }: ButtonProps) => JS
 export declare const ButtonWithIconOnly: ({ children, onClick }: ButtonProps) => JSX.Element;
 export declare const ButtonLoading: ({ children, onClick }: ButtonProps) => JSX.Element;
 export declare const ButtonDisabled: ({ children, onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonAsOtherComponents: ({ children, as, onClick }: ButtonProps) => JSX.Element;
 export default story;

package/dist/esm/components/button/index.js

@@ -14,8 +14,9 @@ var buttonTypeClassNameMap = {
     filledError: 'p-btn--danger',
 };
 var Button = require$$0__default.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? 'filledColor' : _c, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
-    return (jsx("button", __assign({ ref: ref, className: classNames(buttonTypeClassNameMap[variant], className, {
+    var as = _a.as, className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, _c = _a.variant, variant = _c === void 0 ? 'filledColor' : _c, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, hideLabel = _a.hideLabel, props = __rest(_a, ["as", "className", "loading", "children", "variant", "leftIcon", "rightIcon", "hideLabel"]);
+    var ButtonTag = as || 'button';
+    return (jsx(ButtonTag, __assign({ ref: ref, className: classNames(buttonTypeClassNameMap[variant], className, {
             'p-btn--loading': loading,
             'tc-transparent': loading,
             'p-btn--icon-only': hideLabel,

package/dist/esm/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/button/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactElement, ReactNode } from 'react';\n\ntype ButtonVariant =\n  | 'filledColor'\n  | 'filledGray'\n  | 'filledWhite'\n  | 'textColor'\n  | 'textWhite'\n  | 'outlineWhite'\n  | 'filledSuccess'\n  | 'filledError';\n\nconst buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {\n  filledColor: 'p-btn--primary',\n  filledGray: 'p-btn--secondary-grey',\n  filledWhite: 'p-btn--secondary-white',\n  textColor: 'p-btn--secondary',\n  textWhite: 'p-btn--secondary-inverted',\n  outlineWhite: 'p-btn--outline-white',\n  filledSuccess: 'p-btn--success',\n  filledError: 'p-btn--danger',\n};\n\ntype ButtonProps = {\n  children: ReactNode;\n  variant?: ButtonVariant;\n  leftIcon?: ReactElement;\n  rightIcon?: ReactElement;\n  loading?: boolean;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['button'], 'children'>;\n\nconst Button = React.forwardRef((\n  {\n    className,\n    loading = false,\n    children,\n    variant = 'filledColor',\n    leftIcon,\n    rightIcon,\n    hideLabel,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>\n) => (\n    <button\n      ref={ref}\n      className={classNames(\n        buttonTypeClassNameMap[variant], \n        className, {\n          'p-btn--loading': loading,\n          'tc-transparent': loading,\n          'p-btn--icon-only': hideLabel,\n        })}\n      data-testid=\"button\"\n      {...props}\n    >\n      {!loading && (leftIcon || rightIcon) ? (\n        <div className=\"d-flex jc-center ai-center\">\n          {leftIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'mr8': !hideLabel\n              })}\n            >\n              {React.cloneElement(leftIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n          \n          <div className={classNames({\n              'sr-only': hideLabel\n            })}\n          >\n            {children}\n          </div>\n\n          {rightIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'ml8': !hideLabel\n              })}\n            >\n              {React.cloneElement(rightIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n        </div>\n      ) : children}\n    </button>\n  )\n);\n\nexport { Button };\nexport type { ButtonProps, ButtonVariant };\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;AAaA,IAAM,sBAAsB,GAAqC;IAC/D,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,sBAAsB;IACpC,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,eAAe;CAC7B,CAAC;IAWI,MAAM,GAAGA,mBAAK,CAAC,UAAU,CAAC,UAC9B,EASc,EACd,GAA2C;IATzC,IAAA,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cARV,qFASC,CADS;IAGP,QACDC,yBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,sBAAsB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAE;YACT,gBAAgB,EAAE,OAAO;YACzB,gBAAgB,EAAE,OAAO;YACzB,kBAAkB,EAAE,SAAS;SAC9B,CAAC,iBACQ,QAAQ,IAChB,KAAK,cAER,CAAC,OAAO,KAAK,QAAQ,IAAI,SAAS,CAAC,IAClCC,uBAAK,SAAS,EAAC,4BAA4B,iBACxC,QAAQ,KACPD,uBACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,gBAEDD,mBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;wBAC5B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,YACG,CACR;gBAEDC,sBAAK,SAAS,EAAE,UAAU,CAAC;wBACvB,SAAS,EAAE,SAAS;qBACrB,CAAC,gBAED,QAAQ,YACL;gBAEL,SAAS,KACRA,uBACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,gBAEDD,mBAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,YACG,CACR,aACG,IACJ,QAAQ,YACL,EACV;CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/button/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { ReactElement, ElementType, ComponentProps, ReactNode } from 'react';\n\ntype ButtonVariant =\n  | 'filledColor'\n  | 'filledGray'\n  | 'filledWhite'\n  | 'textColor'\n  | 'textWhite'\n  | 'outlineWhite'\n  | 'filledSuccess'\n  | 'filledError';\n\nconst buttonTypeClassNameMap: { [K in ButtonVariant]: string } = {\n  filledColor: 'p-btn--primary',\n  filledGray: 'p-btn--secondary-grey',\n  filledWhite: 'p-btn--secondary-white',\n  textColor: 'p-btn--secondary',\n  textWhite: 'p-btn--secondary-inverted',\n  outlineWhite: 'p-btn--outline-white',\n  filledSuccess: 'p-btn--success',\n  filledError: 'p-btn--danger',\n};\n\nconst buttonDefaultAs = 'button' as const\ntype ButtonDefaultAsType = typeof buttonDefaultAs;\n\ntype ButtonOwnProps<E> = {\n  as?: E; \n  children: ReactNode;\n  variant?: ButtonVariant;\n  leftIcon?: ReactElement;\n  rightIcon?: ReactElement;\n  loading?: boolean;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['button'], 'children'>;\n\nexport type ButtonProps<E extends ElementType = ButtonDefaultAsType> = ButtonOwnProps<E> &\n  Omit<ComponentProps<E>, keyof ButtonOwnProps<E>>;\n\nconst Button = React.forwardRef(<E extends ElementType = ButtonDefaultAsType>(\n  {\n    as,\n    className,\n    loading = false,\n    children,\n    variant = 'filledColor',\n    leftIcon,\n    rightIcon,\n    hideLabel,\n    ...props\n  }: ButtonProps<E>,\n  ref?: React.ForwardedRef<E>\n) => {\n  const ButtonTag = as || 'button';\n\n  return (\n    <ButtonTag\n      ref={ref}\n      className={classNames(\n        buttonTypeClassNameMap[variant], \n        className, {\n          'p-btn--loading': loading,\n          'tc-transparent': loading,\n          'p-btn--icon-only': hideLabel,\n        })}\n      data-testid=\"button\"\n      {...props}\n    >\n      {!loading && (leftIcon || rightIcon) ? (\n        <div className=\"d-flex jc-center ai-center\">\n          {leftIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'mr8': !hideLabel\n              })}\n            >\n              {React.cloneElement(leftIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n          \n          <div className={classNames({\n              'sr-only': hideLabel\n            })}\n          >\n            {children}\n          </div>\n\n          {rightIcon && (\n            <span\n              className={classNames('d-inline-flex', {\n                'ml8': !hideLabel\n              })}\n            >\n              {React.cloneElement(rightIcon, { \n                size: 20, \n                noMargin: true\n              })}\n            </span>\n          )}\n        </div>\n      ) : children}\n    </ButtonTag>\n  )\n});\n\nexport { Button };\nexport type { ButtonVariant };\n"],"names":["React","_jsx","_jsxs"],"mappings":";;;;;AAaA,IAAM,sBAAsB,GAAqC;IAC/D,WAAW,EAAE,gBAAgB;IAC7B,UAAU,EAAE,uBAAuB;IACnC,WAAW,EAAE,wBAAwB;IACrC,SAAS,EAAE,kBAAkB;IAC7B,SAAS,EAAE,2BAA2B;IACtC,YAAY,EAAE,sBAAsB;IACpC,aAAa,EAAE,gBAAgB;IAC/B,WAAW,EAAE,eAAe;CAC7B,CAAC;IAkBI,MAAM,GAAGA,mBAAK,CAAC,UAAU,CAAC,UAC9B,EAUiB,EACjB,GAA2B;IAVzB,IAAA,EAAE,QAAA,EACF,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,QAAQ,cAAA,EACR,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,SAAS,eAAA,EACN,KAAK,cATV,2FAUC,CADS;IAIV,IAAM,SAAS,GAAG,EAAE,IAAI,QAAQ,CAAC;IAEjC,QACEC,IAAC,SAAS,aACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,sBAAsB,CAAC,OAAO,CAAC,EAC/B,SAAS,EAAE;YACT,gBAAgB,EAAE,OAAO;YACzB,gBAAgB,EAAE,OAAO;YACzB,kBAAkB,EAAE,SAAS;SAC9B,CAAC,iBACQ,QAAQ,IAChB,KAAK,cAER,CAAC,OAAO,KAAK,QAAQ,IAAI,SAAS,CAAC,IAClCC,uBAAK,SAAS,EAAC,4BAA4B,iBACxC,QAAQ,KACPD,uBACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,gBAEDD,mBAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;wBAC5B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,YACG,CACR;gBAEDC,sBAAK,SAAS,EAAE,UAAU,CAAC;wBACvB,SAAS,EAAE,SAAS;qBACrB,CAAC,gBAED,QAAQ,YACL;gBAEL,SAAS,KACRA,uBACE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE;wBACrC,KAAK,EAAE,CAAC,SAAS;qBAClB,CAAC,gBAEDD,mBAAK,CAAC,YAAY,CAAC,SAAS,EAAE;wBAC7B,IAAI,EAAE,EAAE;wBACR,QAAQ,EAAE,IAAI;qBACf,CAAC,YACG,CACR,aACG,IACJ,QAAQ,YACF,EACb;AACH,CAAC;;;;"}

package/dist/esm/components/button/index.stories.js

@@ -1,6 +1,7 @@
 import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button } from './index.js';
+import InfoIcon from '../icon/icons/Info.js';
 import PlusIcon from '../icon/icons/Plus.js';
 import SendIcon from '../icon/icons/Send.js';
 import '../../index-6ea95111.js';
@@ -12,6 +13,10 @@ var story = {
     title: 'JSX/Button',
     component: Button,
     argTypes: {
+        as: {
+            control: { type: 'text' },
+            description: 'Allow wrapper element type to be custom defined'
+        },
         children: {
             control: { type: 'text' },
             defaultValue: 'Click me',
@@ -49,8 +54,8 @@ var story = {
     },
 };
 var ButtonStory = function (_a) {
-    var className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, variant = _a.variant, hideLabel = _a.hideLabel;
-    return (jsx("div", __assign({ className: 'wmx6' }, { children: jsx(Button, __assign({ className: className, loading: loading, variant: variant, hideLabel: hideLabel }, { children: children }), void 0) }), void 0));
+    var as = _a.as, className = _a.className, _b = _a.loading, loading = _b === void 0 ? false : _b, children = _a.children, variant = _a.variant, hideLabel = _a.hideLabel;
+    return (jsx("div", __assign({ className: 'wmx6' }, { children: jsx(Button, __assign({ as: as, className: className, loading: loading, variant: variant, hideLabel: hideLabel }, { children: children }), void 0) }), void 0));
 };
 ButtonStory.storyName = "Button";
 var ButtonVariants = function (_a) {
@@ -97,7 +102,15 @@ var ButtonDisabled = function (_a) {
     var children = _a.children, onClick = _a.onClick;
     return (jsx(Button, __assign({ disabled: true, onClick: onClick }, { children: children }), void 0));
 };
+var ButtonAsOtherComponents = function (_a) {
+    var children = _a.children; _a.as; var onClick = _a.onClick;
+    return (jsxs("div", __assign({ className: 'd-flex fd-column gap16 p24 bg-grey-200' }, { children: [jsx("h3", __assign({ className: 'p-h3' }, { children: "As an anchor:" }), void 0),
+            jsx(Button, __assign({ as: "a", href: "https://feather-insurance.com", target: "_blank" }, { children: children }), void 0),
+            jsx("h3", __assign({ className: 'p-h3' }, { children: "As a button:" }), void 0),
+            jsx(Button, __assign({ as: "button", onClick: onClick }, { children: children }), void 0),
+            jsxs("p", __assign({ className: 'p-p p-p--small fw-bold d-flex ai-center gap8 mt32' }, { children: [jsx(InfoIcon, {}, void 0), "Inspect elements to see the different HTML tags being rendered."] }), void 0)] }), void 0));
+};
 
 export default story;
-export { ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
+export { ButtonAsOtherComponents, ButtonDisabled, ButtonLoading, ButtonOnBackgrounds, ButtonStory, ButtonVariants, ButtonWithIconOnly, ButtonWithIcons };
 //# sourceMappingURL=index.stories.js.map

package/dist/esm/components/button/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { Button, ButtonProps, ButtonVariant } from '.';\nimport { PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Button',\n  component: Button,\n  argTypes: {\n    children: {\n      control: { type: 'text' },\n      defaultValue: 'Click me',\n      description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n    },\n    variant: {\n      defaultValue: 'filledColor',\n      description: 'Variant that defines the style of the Button',\n    },\n    leftIcon: {\n      description: 'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    rightIcon: {\n      description: 'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    loading: {\n      defaultValue: false,\n      description: 'Show button on a loading state.',\n    },\n    hideLabel: {\n      defaultValue: false,\n      description: 'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n    },\n    className: {\n      defaultValue: 'wmn3',\n      type: 'text',\n      description: 'Class name for most top parent element',\n    },\n  },\n  parameters: {\n    design: {\n      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n      type: 'figma'\n    },\n  },\n};\n\nexport const ButtonStory = ({\n  className,\n  loading = false,\n  children,\n  variant,\n  hideLabel\n}: ButtonProps) => (\n  <div className='wmx6'>\n    <Button\n      className={className}\n      loading={loading}\n      variant={variant}\n      hideLabel={hideLabel}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n  <div>\n    <h3 className='p-h3 mb24'>Filled variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[ \"filledColor\", \"filledGray\", \"filledWhite\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Text variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-primary-500 px32 br8\" : \"\"}>\n          <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ?? \"tc-white\"}`}>\n            {variant}\n          </h4>\n\n          <Button onClick={onClick} variant={variant as ButtonVariant}>\n            {children}\n          </Button>\n        </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Outline variants</h3>\n    <div className='d-flex gap16 p24 bg-primary-500 br8'>\n      <div>\n        <h4 className='p-h4 mb16 tc-white'>\n          outlineWhite\n        </h4>\n\n        <Button onClick={onClick} variant={'outlineWhite'}>\n          {children}\n        </Button>\n      </div>\n    </div>\n    \n    <h3 className='p-h3 my24'>State variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"filledSuccess\", \"filledError\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n  </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n  <div>\n    <div className='p24 bg-white br8'>\n      <h3 className='p-h3 mb16'>On white</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-grey-200 br8'>\n      <h3 className='p-h3 mb16'>On grey</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-primary-500 br8'>\n      <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n      <div className='d-flex gap16'>\n        {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n  <div className='d-flex gap16'>\n    <Button leftIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n    <Button rightIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n  </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n  <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n  <Button loading onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n  <Button disabled onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/button/index.stories.tsx"],"sourcesContent":["import { Button, ButtonProps, ButtonVariant } from '.';\nimport { InfoIcon, PlusIcon, SendIcon } from '../icon';\n\nconst story = {\n  title: 'JSX/Button',\n  component: Button,\n  argTypes: {\n    as: {\n      control: { type: 'text' },\n      description: 'Allow wrapper element type to be custom defined'\n    },\n    children: {\n      control: { type: 'text' },\n      defaultValue: 'Click me',\n      description: 'Text that is displayed inside the button. Hidden when hideLabel is set as true',\n    },\n    variant: {\n      defaultValue: 'filledColor',\n      description: 'Variant that defines the style of the Button',\n    },\n    leftIcon: {\n      description: 'Icon to be displayed on the left side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    rightIcon: {\n      description: 'Icon to be displayed on the right side of the button. This makes use of [dirty swan Icon component](http://localhost:9009/?path=/docs/jsx-icon--icon-story).',\n    },\n    loading: {\n      defaultValue: false,\n      description: 'Show button on a loading state.',\n    },\n    hideLabel: {\n      defaultValue: false,\n      description: 'Show button as an icon only button. This hides the label but still keeps it for accessibility purposes.',\n    },\n    className: {\n      defaultValue: 'wmn3',\n      type: 'text',\n      description: 'Class name for most top parent element',\n    },\n  },\n  parameters: {\n    design: {\n      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26',\n      type: 'figma'\n    },\n  },\n};\n\nexport const ButtonStory = ({\n  as,\n  className,\n  loading = false,\n  children,\n  variant,\n  hideLabel\n}: ButtonProps) => (\n  <div className='wmx6'>\n    <Button\n      as={as}\n      className={className}\n      loading={loading}\n      variant={variant}\n      hideLabel={hideLabel}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\nButtonStory.storyName = \"Button\";\n\nexport const ButtonVariants = ({ children, onClick }: ButtonProps) => (\n  <div>\n    <h3 className='p-h3 mb24'>Filled variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[ \"filledColor\", \"filledGray\", \"filledWhite\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Text variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"textColor\", \"textWhite\"].map((variant, index) => (\n        <div key={variant} className={variant === \"textWhite\" ? \"bg-primary-500 px32 br8\" : \"\"}>\n          <h4 className={`p-h4 mb16 ${variant === \"textWhite\" ?? \"tc-white\"}`}>\n            {variant}\n          </h4>\n\n          <Button onClick={onClick} variant={variant as ButtonVariant}>\n            {children}\n          </Button>\n        </div>\n      ))}\n    </div>\n\n    <h3 className='p-h3 my24'>Outline variants</h3>\n    <div className='d-flex gap16 p24 bg-primary-500 br8'>\n      <div>\n        <h4 className='p-h4 mb16 tc-white'>\n          outlineWhite\n        </h4>\n\n        <Button onClick={onClick} variant={'outlineWhite'}>\n          {children}\n        </Button>\n      </div>\n    </div>\n    \n    <h3 className='p-h3 my24'>State variants</h3>\n    <div className='d-flex gap16 p24 bg-grey-300 br8'>\n      {[\"filledSuccess\", \"filledError\"].map((variant) => (\n          <div key={variant}>\n            <h4 className='p-h4 mb16'>\n              {variant}\n            </h4>\n\n            <Button onClick={onClick} variant={variant as ButtonVariant}>\n              {children}\n            </Button>\n          </div>\n      ))}\n    </div>\n  </div>\n);\n\nexport const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (\n  <div>\n    <div className='p24 bg-white br8'>\n      <h3 className='p-h3 mb16'>On white</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledGray\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-grey-200 br8'>\n      <h3 className='p-h3 mb16'>On grey</h3>\n      <div className='d-flex gap16'>\n        {[ \"filledColor\", \"filledWhite\", \"textColor\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n\n    <div className='p24 bg-primary-500 br8'>\n      <h3 className='p-h3 mb16 tc-white'>On primary</h3>\n      <div className='d-flex gap16'>\n        {[\"filledWhite\", \"outlineWhite\", \"textWhite\"].map((variant) => (\n          <Button key={variant} onClick={onClick} variant={variant as ButtonVariant}>\n            {variant}\n          </Button>\n        ))}\n      </div>\n    </div>\n  </div>\n);\n\nexport const ButtonWithIcons = ({ children, onClick }: ButtonProps) => (\n  <div className='d-flex gap16'>\n    <Button leftIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n    <Button rightIcon={<SendIcon />} onClick={onClick}>\n      {children}\n    </Button>\n  </div>\n);\n\nexport const ButtonWithIconOnly = ({ children, onClick }: ButtonProps) => (\n  <Button leftIcon={<PlusIcon />} hideLabel onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonLoading = ({ children, onClick }: ButtonProps) => (\n  <Button loading onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonDisabled = ({ children, onClick }: ButtonProps) => (\n  <Button disabled onClick={onClick}>\n    {children}\n  </Button>\n);\n\nexport const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (\n  <div className='d-flex fd-column gap16 p24 bg-grey-200'>\n    <h3 className='p-h3'>As an anchor:</h3>\n      <Button as=\"a\" href=\"https://feather-insurance.com\" target=\"_blank\">\n        {children}\n      </Button>\n\n    <h3 className='p-h3'>As a button:</h3>\n      <Button as=\"button\" onClick={onClick}>\n        {children}\n      </Button>\n\n    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>\n      <InfoIcon />\n      Inspect elements to see the different HTML tags being rendered.\n    </p>\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'balanced' | 'compact' | 'spacious';\ntype TitleVariantType = 'small' | 'medium' | 'large';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n  as?: E;\n  children?: ReactNode;\n  classNames?: {\n    buttonWrapper?: string;\n    wrapper?: string;\n    label?: string;\n    title?: string;\n    description?: string;\n    children?: string;\n    icon?: string;\n    actionIcon?: string;\n  };\n  density?: DensityType;\n  dropShadow?: boolean;\n  icon?: ReactNode;\n  title?: ReactNode;\n  titleVariant?: TitleVariantType;\n  description?: ReactNode;\n  descriptionVariant?: 'small' | 'large';\n  label?: ReactNode;\n  onClick?: () => void;\n  actionIcon?: ReactNode;\n  showActionIcon?: boolean;\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n  Omit<ComponentProps<E>, keyof CardOwnProps<E>>\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n  as,\n  children,\n  classNames,\n  density = 'balanced',\n  description,\n  descriptionVariant = 'large',\n  dropShadow = true,\n  icon,\n  label,\n  onClick,\n  actionIcon,\n  title,\n  titleVariant = 'large',\n  showActionIcon,\n  ...rest\n}: CardProps<E>) => {\n  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n  const propsWithActionIcon = onClick || rest?.href || rest.to; \n  const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n  const Tag = as || cardDefaultTag;\n  \n  return (\n    <Tag\n      className={classNamesUtil(\n        classNames?.buttonWrapper,\n        ' d-flex w100 br8 ai-stretch',\n        {\n          'c-pointer': propsWithActionIcon,\n          [styles.button]: propsWithActionIcon\n        },\n      )}\n      {...onClick && { \n        onClick, \n        type: \"button\"\n      }}\n      {...rest}\n    >\n      <div\n        className={classNamesUtil(\n          'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n          { 'bs-sm': dropShadow },\n          {\n            compact: 'p16',\n            balanced: 'p24',\n            spacious: 'p32',\n          }[density as DensityType],\n          classNames?.wrapper\n        )}\n      >\n        <div className=\"d-flex w100\">\n          {icon && (\n            <div\n              className={classNamesUtil(\n                `d-flex ai-center tc-primary-500`,\n                styles.icon,\n                styles[`icon${density}`],\n                classNames?.icon\n              )}\n            >\n              {icon}\n            </div>\n          )}\n\n          <div className=\"d-flex jc-between w100\">\n            <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n              {label && (\n                <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n                  {label}\n                </h3>\n              )}\n\n              {title && (\n                <h2\n                  className={classNamesUtil(\n                    classNames?.title,\n                    {\n                      large: 'p-h3',\n                      medium: 'p-h4',\n                      small: 'p-p',\n                    }[titleVariant as TitleVariantType]\n                  )}\n                >\n                  {title}\n                </h2>\n              )}\n\n              {description && (\n                <div\n                  className={classNamesUtil(\n                    'tc-grey-600',\n                    classNames?.description,\n                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n                  )}\n                >\n                  {description}\n                </div>\n              )}\n            </div>\n\n            {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (\n              <div\n                className={classNamesUtil(\n                  styles.actionIcon,\n                  classNames?.actionIcon,\n                  styles[`actionIcon${density}`],\n                  'd-flex ai-center'\n                )}\n              >\n                {actionIcon || <ChevronRightIcon size={24} />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {children && <div className={classNames?.children}>{children}</div>}\n      </div>\n    </Tag>\n  );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ComponentProps, ElementType, ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nconst cardDefaultAs = 'section' as const\ntype CardDefaultAsType = typeof cardDefaultAs;\ntype DensityType = 'balanced' | 'compact' | 'spacious';\ntype TitleVariantType = 'small' | 'medium' | 'large';\n\ntype CardOwnProps<E extends ElementType = CardDefaultAsType> = {\n  as?: E;\n  children?: ReactNode;\n  classNames?: {\n    buttonWrapper?: string;\n    wrapper?: string;\n    label?: string;\n    title?: string;\n    description?: string;\n    children?: string;\n    icon?: string;\n    actionIcon?: string;\n  };\n  density?: DensityType;\n  dropShadow?: boolean;\n  icon?: ReactNode;\n  title?: ReactNode;\n  titleVariant?: TitleVariantType;\n  description?: ReactNode;\n  descriptionVariant?: 'small' | 'large';\n  label?: ReactNode;\n  onClick?: () => void;\n  actionIcon?: ReactNode;\n  showActionIcon?: boolean;\n} \n\nexport type CardProps<E extends ElementType = CardDefaultAsType> = CardOwnProps<E> &\n  Omit<ComponentProps<E>, keyof CardOwnProps<E>>;\n\nconst Card = <E extends ElementType = CardDefaultAsType>({\n  as,\n  children,\n  classNames,\n  density = 'balanced',\n  description,\n  descriptionVariant = 'large',\n  dropShadow = true,\n  icon,\n  label,\n  onClick,\n  actionIcon,\n  title,\n  titleVariant = 'large',\n  showActionIcon,\n  ...rest\n}: CardProps<E>) => {\n  const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n  const propsWithActionIcon = onClick || rest?.href || rest.to; \n  const cardDefaultTag = onClick ? 'button' : cardDefaultAs;\n  const Tag = as || cardDefaultTag;\n  \n  return (\n    <Tag\n      className={classNamesUtil(\n        classNames?.buttonWrapper,\n        ' d-flex w100 br8 ai-stretch',\n        {\n          'c-pointer': propsWithActionIcon,\n          [styles.button]: propsWithActionIcon\n        },\n      )}\n      {...onClick && { \n        onClick, \n        type: \"button\"\n      }}\n      {...rest}\n    >\n      <div\n        className={classNamesUtil(\n          'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n          { 'bs-sm': dropShadow },\n          {\n            compact: 'p16',\n            balanced: 'p24',\n            spacious: 'p32',\n          }[density as DensityType],\n          classNames?.wrapper\n        )}\n      >\n        <div className=\"d-flex w100\">\n          {icon && (\n            <div\n              className={classNamesUtil(\n                `d-flex ai-center tc-primary-500`,\n                styles.icon,\n                styles[`icon${density}`],\n                classNames?.icon\n              )}\n            >\n              {icon}\n            </div>\n          )}\n\n          <div className=\"d-flex jc-between w100\">\n            <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n              {label && (\n                <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n                  {label}\n                </h3>\n              )}\n\n              {title && (\n                <h2\n                  className={classNamesUtil(\n                    classNames?.title,\n                    {\n                      large: 'p-h3',\n                      medium: 'p-h4',\n                      small: 'p-p',\n                    }[titleVariant as TitleVariantType]\n                  )}\n                >\n                  {title}\n                </h2>\n              )}\n\n              {description && (\n                <div\n                  className={classNamesUtil(\n                    'tc-grey-600',\n                    classNames?.description,\n                    descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n                  )}\n                >\n                  {description}\n                </div>\n              )}\n            </div>\n\n            {(showActionIcon || (propsWithActionIcon && !hideActionIcon)) && (\n              <div\n                className={classNamesUtil(\n                  styles.actionIcon,\n                  classNames?.actionIcon,\n                  styles[`actionIcon${density}`],\n                  'd-flex ai-center'\n                )}\n              >\n                {actionIcon || <ChevronRightIcon size={24} />}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {children && <div className={classNames?.children}>{children}</div>}\n      </div>\n    </Tag>\n  );\n};\n\nexport { Card };\n"],"names":["classNames","_jsx","classNamesUtil","_jsxs"],"mappings":"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"}

package/dist/esm/lib/components/button/index.d.ts

@@ -1,6 +1,9 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ElementType, ComponentProps, ReactNode } from 'react';
 declare type ButtonVariant = 'filledColor' | 'filledGray' | 'filledWhite' | 'textColor' | 'textWhite' | 'outlineWhite' | 'filledSuccess' | 'filledError';
-declare type ButtonProps = {
+declare const buttonDefaultAs: "button";
+declare type ButtonDefaultAsType = typeof buttonDefaultAs;
+declare type ButtonOwnProps<E> = {
+    as?: E;
     children: ReactNode;
     variant?: ButtonVariant;
     leftIcon?: ReactElement;
@@ -8,13 +11,15 @@ declare type ButtonProps = {
     loading?: boolean;
     hideLabel?: boolean;
 } & Omit<JSX.IntrinsicElements['button'], 'children'>;
+export declare type ButtonProps<E extends ElementType = ButtonDefaultAsType> = ButtonOwnProps<E> & Omit<ComponentProps<E>, keyof ButtonOwnProps<E>>;
 declare const Button: React.ForwardRefExoticComponent<Pick<{
+    as?: React.ElementType<any> | undefined;
     children: ReactNode;
     variant?: ButtonVariant | undefined;
     leftIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     rightIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     loading?: boolean | undefined;
     hideLabel?: boolean | undefined;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | "loading" | "variant"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & Omit<any, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | keyof React.ClassAttributes<HTMLButtonElement> | "as" | "variant" | "loading">, string | number | symbol> & React.RefAttributes<"symbol" | "object" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">>;
 export { Button };
-export type { ButtonProps, ButtonVariant };
+export type { ButtonVariant };

package/dist/esm/lib/components/button/index.stories.d.ts

@@ -3,14 +3,21 @@ import { ButtonProps, ButtonVariant } from '.';
 declare const story: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<{
+        as?: import("react").ElementType<any> | undefined;
         children: import("react").ReactNode;
         variant?: ButtonVariant | undefined;
         leftIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         rightIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         loading?: boolean | undefined;
         hideLabel?: boolean | undefined;
-    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children">, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | "loading" | "variant"> & import("react").RefAttributes<HTMLButtonElement>>;
+    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children"> & Omit<any, "className" | "form" | "slot" | "style" | "title" | "children" | "onClick" | "color" | "hidden" | "type" | "value" | "onChange" | "dir" | "onBlur" | "onFocus" | "onKeyDown" | "tabIndex" | "leftIcon" | "rightIcon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "hideLabel" | keyof import("react").ClassAttributes<HTMLButtonElement> | "as" | "variant" | "loading">, string | number | symbol> & import("react").RefAttributes<"symbol" | "object" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">>;
     argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         children: {
             control: {
                 type: string;
@@ -50,7 +57,7 @@ declare const story: {
     };
 };
 export declare const ButtonStory: {
-    ({ className, loading, children, variant, hideLabel }: ButtonProps): JSX.Element;
+    ({ as, className, loading, children, variant, hideLabel }: ButtonProps): JSX.Element;
     storyName: string;
 };
 export declare const ButtonVariants: ({ children, onClick }: ButtonProps) => JSX.Element;
@@ -59,4 +66,5 @@ export declare const ButtonWithIcons: ({ children, onClick }: ButtonProps) => JS
 export declare const ButtonWithIconOnly: ({ children, onClick }: ButtonProps) => JSX.Element;
 export declare const ButtonLoading: ({ children, onClick }: ButtonProps) => JSX.Element;
 export declare const ButtonDisabled: ({ children, onClick }: ButtonProps) => JSX.Element;
+export declare const ButtonAsOtherComponents: ({ children, as, onClick }: ButtonProps) => JSX.Element;
 export default story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.44.1",
+  "version": "0.45.0-alpha",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/button/index.stories.tsx

@@ -1,10 +1,14 @@
 import { Button, ButtonProps, ButtonVariant } from '.';
-import { PlusIcon, SendIcon } from '../icon';
+import { InfoIcon, PlusIcon, SendIcon } from '../icon';
 
 const story = {
   title: 'JSX/Button',
   component: Button,
   argTypes: {
+    as: {
+      control: { type: 'text' },
+      description: 'Allow wrapper element type to be custom defined'
+    },
     children: {
       control: { type: 'text' },
       defaultValue: 'Click me',
@@ -43,6 +47,7 @@ const story = {
 };
 
 export const ButtonStory = ({
+  as,
   className,
   loading = false,
   children,
@@ -51,6 +56,7 @@ export const ButtonStory = ({
 }: ButtonProps) => (
   <div className='wmx6'>
     <Button
+      as={as}
       className={className}
       loading={loading}
       variant={variant}
@@ -191,4 +197,23 @@ export const ButtonDisabled = ({ children, onClick }: ButtonProps) => (
   </Button>
 );
 
+export const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (
+  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+    <h3 className='p-h3'>As an anchor:</h3>
+      <Button as="a" href="https://feather-insurance.com" target="_blank">
+        {children}
+      </Button>
+
+    <h3 className='p-h3'>As a button:</h3>
+      <Button as="button" onClick={onClick}>
+        {children}
+      </Button>
+
+    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>
+      <InfoIcon />
+      Inspect elements to see the different HTML tags being rendered.
+    </p>
+  </div>
+);
+
 export default story;