@sps-woodland/buttons 8.0.0-rc1

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/buttons](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/buttons#readme)
+
+SPS Woodland Design System button components

package/lib/button/Button.css.d.ts

@@ -0,0 +1,14 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export declare type ButtonKind = keyof typeof Tokens.component.button.kind;
+interface ButtonVariantDefinitions extends VariantDefinitions {
+    kind: RecipeVariant<ButtonKind>;
+    disabled: BooleanRecipeVariant;
+    spinning: BooleanRecipeVariant;
+}
+export declare const button: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<ButtonVariantDefinitions>;
+export declare const buttonElement: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<ButtonVariantDefinitions>;
+export declare const linkButton: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ButtonVariantDefinitions, "spinning">>;
+export declare const buttonIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ButtonVariantDefinitions, "kind">>;
+export declare const buttonSpinner: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ButtonVariantDefinitions, "spinning">>;
+export {};

package/lib/button/Button.d.ts

@@ -0,0 +1 @@
+export declare const Button: any;

package/lib/button/Button.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const ButtonExamples: ComponentManifestEntry;

package/lib/index.cjs.js

@@ -0,0 +1,426 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),W=require("@sps-woodland/core"),m=require("@spscommerce/utils"),He=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function We(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const U=He(b),d=We(b);function Ke(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=Ke(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function Ie(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=Ke(e))&&(r&&(r+=" "),r+=t);return r}typeof window<"u"&&U.default.useLayoutEffect;let pe=new Map;function je(e,t){if(e===t)return e;let n=pe.get(e);if(n)return n(t),t;let r=pe.get(t);return r?(r(e),e):t}function ze(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function me(...e){let t={...e[0]};for(let n=1;n<e.length;n++){let r=e[n];for(let s in r){let l=t[s],u=r[s];typeof l=="function"&&typeof u=="function"&&s[0]==="o"&&s[1]==="n"&&s.charCodeAt(2)>=65&&s.charCodeAt(2)<=90?t[s]=ze(l,u):(s==="className"||s==="UNSAFE_className")&&typeof l=="string"&&typeof u=="string"?t[s]=Ie(l,u):s==="id"&&l&&u?t.id=je(l,u):t[s]=u!==void 0?u:l}}return t}const Ye=new Set(["id"]),qe=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Xe=/^(data-.*)$/;function Je(e,t={}){let{labelable:n,propNames:r}=t,s={};for(const l in e)Object.prototype.hasOwnProperty.call(e,l)&&(Ye.has(l)||n&&qe.has(l)||(r==null?void 0:r.has(l))||Xe.test(l))&&(s[l]=e[l]);return s}let G=new Map,be=new Set;function ge(){if(typeof window>"u")return;let e=n=>{let r=G.get(n.target);r||(r=new Set,G.set(n.target,r),n.target.addEventListener("transitioncancel",t)),r.add(n.propertyName)},t=n=>{let r=G.get(n.target);if(!!r&&(r.delete(n.propertyName),r.size===0&&(n.target.removeEventListener("transitioncancel",t),G.delete(n.target)),G.size===0)){for(let s of be)s();be.clear()}};document.body.addEventListener("transitionrun",e),document.body.addEventListener("transitionend",t)}typeof document<"u"&&(document.readyState!=="loading"?ge():document.addEventListener("DOMContentLoaded",ge));const Qe=typeof window<"u"?U.default.useLayoutEffect:()=>{};let ye=new Map;function Ze(e,t){if(e===t)return e;let n=ye.get(e);if(n)return n(t),t;let r=ye.get(t);return r?(r(e),e):t}function et(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function Q(...e){let t={...e[0]};for(let n=1;n<e.length;n++){let r=e[n];for(let s in r){let l=t[s],u=r[s];typeof l=="function"&&typeof u=="function"&&s[0]==="o"&&s[1]==="n"&&s.charCodeAt(2)>=65&&s.charCodeAt(2)<=90?t[s]=et(l,u):(s==="className"||s==="UNSAFE_className")&&typeof l=="string"&&typeof u=="string"?t[s]=Ie(l,u):s==="id"&&l&&u?t.id=Ze(l,u):t[s]=u!==void 0?u:l}}return t}function F(e){if(tt())e.focus({preventScroll:!0});else{let t=nt(e);e.focus(),rt(t)}}let q=null;function tt(){if(q==null){q=!1;try{var e=document.createElement("div");e.focus({get preventScroll(){return q=!0,!0}})}catch{}}return q}function nt(e){for(var t=e.parentNode,n=[],r=document.scrollingElement||document.documentElement;t instanceof HTMLElement&&t!==r;)(t.offsetHeight<t.scrollHeight||t.offsetWidth<t.scrollWidth)&&n.push({element:t,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}),t=t.parentNode;return r instanceof HTMLElement&&n.push({element:r,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft}),n}function rt(e){for(let{element:t,scrollTop:n,scrollLeft:r}of e)t.scrollTop=n,t.scrollLeft=r}let _=new Map,te=new Set;function ve(){if(typeof window>"u")return;let e=n=>{let r=_.get(n.target);r||(r=new Set,_.set(n.target,r),n.target.addEventListener("transitioncancel",t)),r.add(n.propertyName)},t=n=>{let r=_.get(n.target);if(!!r&&(r.delete(n.propertyName),r.size===0&&(n.target.removeEventListener("transitioncancel",t),_.delete(n.target)),_.size===0)){for(let s of te)s();te.clear()}};document.body.addEventListener("transitionrun",e),document.body.addEventListener("transitionend",t)}typeof document<"u"&&(document.readyState!=="loading"?ve():document.addEventListener("DOMContentLoaded",ve));function Me(e){requestAnimationFrame(()=>{_.size===0?e():te.add(e)})}function ot(){let e=b.useRef(new Map),t=b.useCallback((s,l,u,p)=>{let f=p!=null&&p.once?(...g)=>{e.current.delete(u),u(...g)}:u;e.current.set(u,{type:l,eventTarget:s,fn:f,options:p}),s.addEventListener(l,u,p)},[]),n=b.useCallback((s,l,u,p)=>{var f;let g=((f=e.current.get(u))===null||f===void 0?void 0:f.fn)||u;s.removeEventListener(l,g,p),e.current.delete(u)},[]),r=b.useCallback(()=>{e.current.forEach((s,l)=>{n(s.eventTarget,s.type,l,s.options)})},[n]);return b.useEffect(()=>r,[r]),{addGlobalListener:t,removeGlobalListener:n,removeAllGlobalListeners:r}}function Ae(e,t){Qe(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref.current=null}},[e,t])}function ie(e){var t;return typeof window<"u"&&window.navigator!=null?e.test(((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.platform)||window.navigator.platform):!1}function _e(){return ie(/^Mac/i)}function st(){return ie(/^iPhone/i)}function at(){return ie(/^iPad/i)||_e()&&navigator.maxTouchPoints>1}function Fe(){return st()||at()}const it=typeof window<"u"?U.default.useLayoutEffect:()=>{};let H=new Map,$e=new Set;function he(){if(typeof window>"u")return;let e=n=>{let r=H.get(n.target);r||(r=new Set,H.set(n.target,r),n.target.addEventListener("transitioncancel",t)),r.add(n.propertyName)},t=n=>{let r=H.get(n.target);if(!!r&&(r.delete(n.propertyName),r.size===0&&(n.target.removeEventListener("transitioncancel",t),H.delete(n.target)),H.size===0)){for(let s of $e)s();$e.clear()}};document.body.addEventListener("transitionrun",e),document.body.addEventListener("transitionend",t)}typeof document<"u"&&(document.readyState!=="loading"?he():document.addEventListener("DOMContentLoaded",he));function lt(e){var t;return typeof window>"u"||window.navigator==null?!1:((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.brands.some(n=>e.test(n.brand)))||e.test(window.navigator.userAgent)}function ct(e){var t;return typeof window<"u"&&window.navigator!=null?e.test(((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.platform)||window.navigator.platform):!1}function ut(){return ct(/^Mac/i)}function dt(){return lt(/Android/i)}function ft(e){return e.mozInputSource===0&&e.isTrusted?!0:dt()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}const pt=U.default.createContext(null);pt.displayName="PressResponderContext";class mt{isDefaultPrevented(){return this.nativeEvent.defaultPrevented}preventDefault(){this.defaultPrevented=!0,this.nativeEvent.preventDefault()}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPropagationStopped=()=>!0}isPropagationStopped(){return!1}persist(){}constructor(t,n){this.nativeEvent=n,this.target=n.target,this.currentTarget=n.currentTarget,this.relatedTarget=n.relatedTarget,this.bubbles=n.bubbles,this.cancelable=n.cancelable,this.defaultPrevented=n.defaultPrevented,this.eventPhase=n.eventPhase,this.isTrusted=n.isTrusted,this.timeStamp=n.timeStamp,this.type=t}}function bt(e){let t=b.useRef({isFocused:!1,onBlur:e,observer:null});return t.current.onBlur=e,it(()=>{const n=t.current;return()=>{n.observer&&(n.observer.disconnect(),n.observer=null)}},[]),b.useCallback(n=>{if(n.target instanceof HTMLButtonElement||n.target instanceof HTMLInputElement||n.target instanceof HTMLTextAreaElement||n.target instanceof HTMLSelectElement){t.current.isFocused=!0;let r=n.target,s=l=>{var u,p;t.current.isFocused=!1,r.disabled&&((p=(u=t.current).onBlur)===null||p===void 0||p.call(u,new mt("blur",l))),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)};r.addEventListener("focusout",s,{once:!0}),t.current.observer=new MutationObserver(()=>{t.current.isFocused&&r.disabled&&(t.current.observer.disconnect(),r.dispatchEvent(new FocusEvent("blur")),r.dispatchEvent(new FocusEvent("focusout",{bubbles:!0})))}),t.current.observer.observe(r,{attributes:!0,attributeFilter:["disabled"]})}},[])}function gt(e){let{isDisabled:t,onFocus:n,onBlur:r,onFocusChange:s}=e;const l=b.useCallback(f=>{if(f.target===f.currentTarget)return r&&r(f),s&&s(!1),!0},[r,s]),u=bt(l),p=b.useCallback(f=>{f.target===f.currentTarget&&(n&&n(f),s&&s(!0),u(f))},[s,n,u]);return{focusProps:{onFocus:!t&&(n||s||r)?p:void 0,onBlur:!t&&(r||s)?l:null}}}let j=null,yt=new Set,ke=!1,D=!1,ne=!1;function le(e,t){for(let n of yt)n(e,t)}function vt(e){return!(e.metaKey||!ut()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function we(e){D=!0,vt(e)&&(j="keyboard",le("keyboard",e))}function I(e){j="pointer",(e.type==="mousedown"||e.type==="pointerdown")&&(D=!0,le("pointer",e))}function $t(e){ft(e)&&(D=!0,j="virtual")}function ht(e){e.target===window||e.target===document||(!D&&!ne&&(j="virtual",le("virtual",e)),D=!1,ne=!1)}function kt(){D=!1,ne=!0}function Ee(){if(typeof window>"u"||ke)return;let e=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){D=!0,e.apply(this,arguments)},document.addEventListener("keydown",we,!0),document.addEventListener("keyup",we,!0),document.addEventListener("click",$t,!0),window.addEventListener("focus",ht,!0),window.addEventListener("blur",kt,!1),typeof PointerEvent<"u"?(document.addEventListener("pointerdown",I,!0),document.addEventListener("pointermove",I,!0),document.addEventListener("pointerup",I,!0)):(document.addEventListener("mousedown",I,!0),document.addEventListener("mousemove",I,!0),document.addEventListener("mouseup",I,!0)),ke=!0}typeof document<"u"&&(document.readyState!=="loading"?Ee():document.addEventListener("DOMContentLoaded",Ee));function wt(){return j}function Be(e){if(!e)return;let t=!0;return n=>{let r={...n,preventDefault(){n.preventDefault()},isDefaultPrevented(){return n.isDefaultPrevented()},stopPropagation(){console.error("stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.")},continuePropagation(){t=!1}};e(r),t&&n.stopPropagation()}}function Et(e){return{keyboardProps:e.isDisabled?{}:{onKeyDown:Be(e.onKeyDown),onKeyUp:Be(e.onKeyUp)}}}function Bt(e){if(wt()==="virtual"){let t=document.activeElement;Me(()=>{document.activeElement===t&&document.contains(e)&&F(e)})}else F(e)}function Pt(e,t){return t.some(n=>n.contains(e))}class ce{get size(){return this.fastMap.size}getTreeNode(t){return this.fastMap.get(t)}addTreeNode(t,n,r){let s=this.fastMap.get(n!=null?n:null),l=new Pe({scopeRef:t});s.addChild(l),l.parent=s,this.fastMap.set(t,l),r&&(l.nodeToRestore=r)}removeTreeNode(t){if(t===null)return;let n=this.fastMap.get(t),r=n.parent;for(let l of this.traverse())l!==n&&n.nodeToRestore&&l.nodeToRestore&&n.scopeRef.current&&Pt(l.nodeToRestore,n.scopeRef.current)&&(l.nodeToRestore=n.nodeToRestore);let s=n.children;r.removeChild(n),s.length>0&&s.forEach(l=>r.addChild(l)),this.fastMap.delete(n.scopeRef)}*traverse(t=this.root){if(t.scopeRef!=null&&(yield t),t.children.length>0)for(let n of t.children)yield*this.traverse(n)}clone(){let t=new ce;for(let n of this.traverse())t.addTreeNode(n.scopeRef,n.parent.scopeRef,n.nodeToRestore);return t}constructor(){this.fastMap=new Map,this.root=new Pe({scopeRef:null}),this.fastMap.set(null,this.root)}}class Pe{addChild(t){this.children.push(t),t.parent=this}removeChild(t){this.children.splice(this.children.indexOf(t),1),t.parent=void 0}constructor(t){this.children=[],this.contain=!1,this.scopeRef=t.scopeRef}}new ce;let Tt=U.default.createContext(null);function xt(e){let t=b.useContext(Tt)||{};Ae(t,e);let{ref:n,...r}=t;return r}function St(e,t){let{focusProps:n}=gt(e),{keyboardProps:r}=Et(e),s=Q(n,r),l=xt(t),u=e.isDisabled?{}:l,p=b.useRef(e.autoFocus);return b.useEffect(()=>{p.current&&t.current&&Bt(t.current),p.current=!1},[t]),{focusableProps:Q({...s,tabIndex:e.excludeFromTabOrder&&!e.isDisabled?-1:void 0},u)}}let R="default",re="",J=new WeakMap;function Te(e){Fe()?(R==="default"&&(re=document.documentElement.style.webkitUserSelect,document.documentElement.style.webkitUserSelect="none"),R="disabled"):(e instanceof HTMLElement||e instanceof SVGElement)&&(J.set(e,e.style.userSelect),e.style.userSelect="none")}function X(e){if(Fe()){if(R!=="disabled")return;R="restoring",setTimeout(()=>{Me(()=>{R==="restoring"&&(document.documentElement.style.webkitUserSelect==="none"&&(document.documentElement.style.webkitUserSelect=re||""),re="",R="default")})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&J.has(e)){let t=J.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),J.delete(e)}}function oe(e){return e.mozInputSource===0&&e.isTrusted?!0:e.detail===0&&!e.pointerType}const Re=U.default.createContext(null);Re.displayName="PressResponderContext";function Nt(e){let t=b.useContext(Re);if(t){let{register:n,...r}=t;e=Q(r,e),n()}return Ae(t,e.ref),e}function Ct(e){let{onPress:t,onPressChange:n,onPressStart:r,onPressEnd:s,onPressUp:l,isDisabled:u,isPressed:p,preventFocusOnPress:f,shouldCancelOnPointerExit:g,allowTextSelectionOnPress:y,ref:L,...S}=Nt(e),w=b.useRef(null);w.current={onPress:t,onPressChange:n,onPressStart:r,onPressEnd:s,onPressUp:l,isDisabled:u,shouldCancelOnPointerExit:g};let[N,P]=b.useState(!1),K=b.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:E,removeAllGlobalListeners:$}=ot(),C=b.useMemo(()=>{let o=K.current,B=(i,h)=>{let{onPressStart:a,onPressChange:c,isDisabled:Y}=w.current;Y||o.didFirePressStart||(a&&a({type:"pressstart",pointerType:h,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey}),c&&c(!0),o.didFirePressStart=!0,P(!0))},k=(i,h,a=!0)=>{let{onPressEnd:c,onPressChange:Y,onPress:fe,isDisabled:Ge}=w.current;!o.didFirePressStart||(o.ignoreClickAfterPress=!0,o.didFirePressStart=!1,c&&c({type:"pressend",pointerType:h,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey}),Y&&Y(!1),P(!1),fe&&a&&!Ge&&fe({type:"press",pointerType:h,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey}))},V=(i,h)=>{let{onPressUp:a,isDisabled:c}=w.current;c||a&&a({type:"pressup",pointerType:h,target:i.currentTarget,shiftKey:i.shiftKey,metaKey:i.metaKey,ctrlKey:i.ctrlKey,altKey:i.altKey})},x=i=>{o.isPressed&&(o.isOverTarget&&k(T(o.target,i),o.pointerType,!1),o.isPressed=!1,o.isOverTarget=!1,o.activePointerId=null,o.pointerType=null,$(),y||X(o.target))},v={onKeyDown(i){Z(i.nativeEvent,i.currentTarget)&&i.currentTarget.contains(i.target)?(Se(i.target,i.key)&&i.preventDefault(),i.stopPropagation(),!o.isPressed&&!i.repeat&&(o.target=i.currentTarget,o.isPressed=!0,B(i,"keyboard"),E(document,"keyup",Ve,!1))):i.key==="Enter"&&se(i.currentTarget)&&i.stopPropagation()},onKeyUp(i){Z(i.nativeEvent,i.currentTarget)&&!i.repeat&&i.currentTarget.contains(i.target)&&V(T(o.target,i),"keyboard")},onClick(i){i&&!i.currentTarget.contains(i.target)||i&&i.button===0&&(i.stopPropagation(),u&&i.preventDefault(),!o.ignoreClickAfterPress&&!o.ignoreEmulatedMouseEvents&&(o.pointerType==="virtual"||oe(i.nativeEvent))&&(!u&&!f&&F(i.currentTarget),B(i,"virtual"),V(i,"virtual"),k(i,"virtual")),o.ignoreEmulatedMouseEvents=!1,o.ignoreClickAfterPress=!1)}},Ve=i=>{if(o.isPressed&&Z(i,o.target)){Se(i.target,i.key)&&i.preventDefault(),i.stopPropagation(),o.isPressed=!1;let h=i.target;k(T(o.target,i),"keyboard",o.target.contains(h)),$(),o.target instanceof HTMLElement&&o.target.contains(h)&&(se(o.target)||o.target.getAttribute("role")==="link")&&o.target.click()}};if(typeof PointerEvent<"u"){v.onPointerDown=c=>{if(!(c.button!==0||!c.currentTarget.contains(c.target))){if(It(c.nativeEvent)){o.pointerType="virtual";return}ee(c.currentTarget)&&c.preventDefault(),o.pointerType=c.pointerType,c.stopPropagation(),o.isPressed||(o.isPressed=!0,o.isOverTarget=!0,o.activePointerId=c.pointerId,o.target=c.currentTarget,!u&&!f&&F(c.currentTarget),y||Te(o.target),B(c,o.pointerType),E(document,"pointermove",i,!1),E(document,"pointerup",h,!1),E(document,"pointercancel",a,!1))}},v.onMouseDown=c=>{!c.currentTarget.contains(c.target)||c.button===0&&(ee(c.currentTarget)&&c.preventDefault(),c.stopPropagation())},v.onPointerUp=c=>{!c.currentTarget.contains(c.target)||o.pointerType==="virtual"||c.button===0&&M(c,c.currentTarget)&&V(c,o.pointerType||c.pointerType)};let i=c=>{c.pointerId===o.activePointerId&&(M(c,o.target)?o.isOverTarget||(o.isOverTarget=!0,B(T(o.target,c),o.pointerType)):o.isOverTarget&&(o.isOverTarget=!1,k(T(o.target,c),o.pointerType,!1),w.current.shouldCancelOnPointerExit&&x(c)))},h=c=>{c.pointerId===o.activePointerId&&o.isPressed&&c.button===0&&(M(c,o.target)?k(T(o.target,c),o.pointerType):o.isOverTarget&&k(T(o.target,c),o.pointerType,!1),o.isPressed=!1,o.isOverTarget=!1,o.activePointerId=null,o.pointerType=null,$(),y||X(o.target))},a=c=>{x(c)};v.onDragStart=c=>{!c.currentTarget.contains(c.target)||x(c)}}else{v.onMouseDown=a=>{a.button!==0||!a.currentTarget.contains(a.target)||(ee(a.currentTarget)&&a.preventDefault(),a.stopPropagation(),!o.ignoreEmulatedMouseEvents&&(o.isPressed=!0,o.isOverTarget=!0,o.target=a.currentTarget,o.pointerType=oe(a.nativeEvent)?"virtual":"mouse",!u&&!f&&F(a.currentTarget),B(a,o.pointerType),E(document,"mouseup",i,!1)))},v.onMouseEnter=a=>{!a.currentTarget.contains(a.target)||(a.stopPropagation(),o.isPressed&&!o.ignoreEmulatedMouseEvents&&(o.isOverTarget=!0,B(a,o.pointerType)))},v.onMouseLeave=a=>{!a.currentTarget.contains(a.target)||(a.stopPropagation(),o.isPressed&&!o.ignoreEmulatedMouseEvents&&(o.isOverTarget=!1,k(a,o.pointerType,!1),w.current.shouldCancelOnPointerExit&&x(a)))},v.onMouseUp=a=>{!a.currentTarget.contains(a.target)||!o.ignoreEmulatedMouseEvents&&a.button===0&&V(a,o.pointerType)};let i=a=>{if(a.button===0){if(o.isPressed=!1,$(),o.ignoreEmulatedMouseEvents){o.ignoreEmulatedMouseEvents=!1;return}M(a,o.target)?k(T(o.target,a),o.pointerType):o.isOverTarget&&k(T(o.target,a),o.pointerType,!1),o.isOverTarget=!1}};v.onTouchStart=a=>{if(!a.currentTarget.contains(a.target))return;a.stopPropagation();let c=Dt(a.nativeEvent);!c||(o.activePointerId=c.identifier,o.ignoreEmulatedMouseEvents=!0,o.isOverTarget=!0,o.isPressed=!0,o.target=a.currentTarget,o.pointerType="touch",!u&&!f&&F(a.currentTarget),y||Te(o.target),B(a,o.pointerType),E(window,"scroll",h,!0))},v.onTouchMove=a=>{if(!a.currentTarget.contains(a.target)||(a.stopPropagation(),!o.isPressed))return;let c=xe(a.nativeEvent,o.activePointerId);c&&M(c,a.currentTarget)?o.isOverTarget||(o.isOverTarget=!0,B(a,o.pointerType)):o.isOverTarget&&(o.isOverTarget=!1,k(a,o.pointerType,!1),w.current.shouldCancelOnPointerExit&&x(a))},v.onTouchEnd=a=>{if(!a.currentTarget.contains(a.target)||(a.stopPropagation(),!o.isPressed))return;let c=xe(a.nativeEvent,o.activePointerId);c&&M(c,a.currentTarget)?(V(a,o.pointerType),k(a,o.pointerType)):o.isOverTarget&&k(a,o.pointerType,!1),o.isPressed=!1,o.activePointerId=null,o.isOverTarget=!1,o.ignoreEmulatedMouseEvents=!0,y||X(o.target),$()},v.onTouchCancel=a=>{!a.currentTarget.contains(a.target)||(a.stopPropagation(),o.isPressed&&x(a))};let h=a=>{o.isPressed&&a.target.contains(o.target)&&x({currentTarget:o.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};v.onDragStart=a=>{!a.currentTarget.contains(a.target)||x(a)}}return v},[E,u,f,$,y]);return b.useEffect(()=>()=>{y||X(K.current.target)},[y]),{isPressed:p||N,pressProps:Q(S,C)}}function se(e){return e.tagName==="A"&&e.hasAttribute("href")}function Z(e,t){const{key:n,code:r}=e,s=t,l=s.getAttribute("role");return(n==="Enter"||n===" "||n==="Spacebar"||r==="Space")&&!(s instanceof HTMLInputElement&&!Ue(s,n)||s instanceof HTMLTextAreaElement||s.isContentEditable)&&(!se(s)||l==="button"&&n!=="Enter")&&!(l==="link"&&n!=="Enter")}function Dt(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function xe(e,t){const n=e.changedTouches;for(let r=0;r<n.length;r++){const s=n[r];if(s.identifier===t)return s}return null}function T(e,t){return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey}}function Ot(e){let t=e.width/2||e.radiusX||0,n=e.height/2||e.radiusY||0;return{top:e.clientY-n,right:e.clientX+t,bottom:e.clientY+n,left:e.clientX-t}}function Lt(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function M(e,t){let n=t.getBoundingClientRect(),r=Ot(e);return Lt(n,r)}function ee(e){return!(e instanceof HTMLElement)||!e.draggable}function Se(e,t){return e instanceof HTMLInputElement?!Ue(e,t):e instanceof HTMLButtonElement?e.type!=="submit":!0}const Kt=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function Ue(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":Kt.has(e.type)}function It(e){return e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}let Mt=new Set,Ne=!1,O=!1,ae=!1;function ue(e,t){for(let n of Mt)n(e,t)}function At(e){return!(e.metaKey||!_e()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function Ce(e){O=!0,At(e)&&ue("keyboard",e)}function A(e){(e.type==="mousedown"||e.type==="pointerdown")&&(O=!0,ue("pointer",e))}function _t(e){oe(e)&&(O=!0)}function Ft(e){e.target===window||e.target===document||(!O&&!ae&&ue("virtual",e),O=!1,ae=!1)}function Rt(){O=!1,ae=!0}function De(){if(typeof window>"u"||Ne)return;let e=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){O=!0,e.apply(this,arguments)},document.addEventListener("keydown",Ce,!0),document.addEventListener("keyup",Ce,!0),document.addEventListener("click",_t,!0),window.addEventListener("focus",Ft,!0),window.addEventListener("blur",Rt,!1),typeof PointerEvent<"u"?(document.addEventListener("pointerdown",A,!0),document.addEventListener("pointermove",A,!0),document.addEventListener("pointerup",A,!0)):(document.addEventListener("mousedown",A,!0),document.addEventListener("mousemove",A,!0),document.addEventListener("mouseup",A,!0)),Ne=!0}typeof document<"u"&&(document.readyState!=="loading"?De():document.addEventListener("DOMContentLoaded",De));function Ut(e,t){let{elementType:n="button",isDisabled:r,onPress:s,onPressStart:l,onPressEnd:u,onPressChange:p,preventFocusOnPress:f,allowFocusWhenDisabled:g,onClick:y,href:L,target:S,rel:w,type:N="button"}=e,P;n==="button"?P={type:N,disabled:r}:P={role:"button",tabIndex:r?void 0:0,href:n==="a"&&r?void 0:L,target:n==="a"?S:void 0,type:n==="input"?N:void 0,disabled:n==="input"?r:void 0,"aria-disabled":!r||n==="input"?void 0:r,rel:n==="a"?w:void 0};let{pressProps:K,isPressed:E}=Ct({onPressStart:l,onPressEnd:u,onPressChange:p,onPress:s,isDisabled:r,preventFocusOnPress:f,ref:t}),{focusableProps:$}=St(e,t);g&&($.tabIndex=r?-1:$.tabIndex);let C=me($,K,Je(e,{labelable:!0}));return{isPressed:E,buttonProps:me(P,C,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:o=>{y&&(y(o),console.warn("onClick is deprecated, please use onPress"))}})}}function Vt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Oe(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),n.push.apply(n,r)}return n}function Le(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?Oe(Object(n),!0).forEach(function(r){Vt(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Oe(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}var Gt=(e,t,n)=>{for(var r of Object.keys(e)){var s;if(e[r]!==((s=t[r])!==null&&s!==void 0?s:n[r]))return!1}return!0},z=e=>t=>{var n=e.defaultClassName,r=Le(Le({},e.defaultVariants),t);for(var s in r){var l,u=(l=r[s])!==null&&l!==void 0?l:e.defaultVariants[s];if(u!=null){var p=u;typeof p=="boolean"&&(p=p===!0?"true":"false");var f=e.variantClassNames[s][p];f&&(n+=" "+f)}}for(var[g,y]of e.compoundVariants)Gt(g,r,e.defaultVariants)&&(n+=" "+y);return n},Ht=z({defaultClassName:"_125pcxy0",variantClassNames:{disabled:{true:"_125pcxy1",false:"_125pcxy2"},kind:{default:"_125pcxy3",link:"_125pcxy4",confirm:"_125pcxy5",delete:"_125pcxy6",key:"_125pcxy7",icon:"_125pcxy8"},spinning:{true:"_125pcxy9",false:"_125pcxya"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[[{kind:"icon",spinning:!0},"_125pcxyb"],[{kind:"default",spinning:!0},"_125pcxyc"],[{kind:"confirm",spinning:!0},"_125pcxyd"],[{kind:"delete",spinning:!0},"_125pcxye"],[{kind:"key",spinning:!0},"_125pcxyf"],[{disabled:!0,spinning:!1},"_125pcxyg"]]}),Wt=z({defaultClassName:"_125pcxyh",variantClassNames:{disabled:{true:"_125pcxyi",false:"_125pcxyj"},kind:{icon:"_125pcxyk",default:"_125pcxyl",delete:"_125pcxym",key:"_125pcxyn",confirm:"_125pcxyo",link:"_125pcxyp"},spinning:{true:"_125pcxyq",false:"_125pcxyr"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[]}),jt=z({defaultClassName:"_125pcxyv",variantClassNames:{kind:{icon:"_125pcxyw",default:"_125pcxyx",key:"_125pcxyy",delete:"_125pcxyz",confirm:"_125pcxy10",link:"_125pcxy11"}},defaultVariants:{kind:"default"},compoundVariants:[]}),zt=z({defaultClassName:"_125pcxy12",variantClassNames:{spinning:{true:"_125pcxy13",false:"_125pcxy14"}},defaultVariants:{spinning:!1},compoundVariants:[]}),Yt=z({defaultClassName:"_125pcxys",variantClassNames:{spinning:{true:"_125pcxyt",false:"_125pcxyu"}},defaultVariants:{spinning:!1},compoundVariants:[]});const de=d.forwardRef(({onClick:e,onPress:t,children:n,className:r,isDisabled:s,disabled:l,href:u,icon:p,kind:f="default",spinning:g,spinningTitle:y,...L},S)=>{var B;const w={onPress:t!=null?t:e,isDisabled:(B=l!=null?l:s)!=null?B:g,...L},{"data-testid":N}=L,P=S!=null?S:d.useRef(null),{buttonProps:K}=Ut(w,P),{t:E}=d.useContext(W.I18nContext),$=p&&d.createElement(W.Icon,{className:jt({kind:f}),icon:p,"aria-hidden":"true","data-testid":`${N}__${p}-icon`});let C;f==="default"||f==="icon"||f==="link"?C="dark":C="light";const o=g&&d.createElement(W.Spinner,{color:C,className:zt({spinning:g}),title:y||E("design-system:button.spinningTitle"),"data-testid":`${N}__spinner`});return d.createElement("div",{className:W.cl(Ht({disabled:s||l,kind:f,spinning:g}),r)},u?d.createElement("a",{className:Yt({spinning:g}),...L,href:u},$,n,o):d.createElement(d.Fragment,null,d.createElement("button",{className:Wt({disabled:s||l,kind:f,spinning:g}),disabled:s,...K,ref:P},$,n,o)))});W.Metadata.set(de,{name:"Buttons",props:{disabled:"boolean",href:"string",icon:"IconName",kind:{type:'"default" | "link" | "icon" | "confirm" | "delete" | "key"',default:'"default"'},spinning:"boolean",spinningTitle:"string",type:{type:'"button" | "submit"',default:'"button"'}}});const qt={components:[de],description:()=>d.createElement(d.Fragment,null,d.createElement("div",{className:"sps-body-14"},"Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."),d.createElement("br",null),d.createElement("h5",null,"Variants"),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Default: "),"For tertiary actions or actions of lower importance on a page."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Key: "),"For primary or important actions on a page."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Confirm: "),"For the main call to action on a page. There should only be one Confirm button per screen."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Delete: "),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Disabled: "),"For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it\u2019s disabled."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"With an Icon: "),"For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),examples:{basic:{label:"Basic Buttons",description:({NavigateTo:e})=>d.createElement(d.Fragment,null,d.createElement("p",null,"The most common type of button that can be used in most cases. Example: Basic Buttons in a ",d.createElement(e,{to:"modals"},"Modal"),".")),examples:{withoutIcons:{description:"Without Icons",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })}>Default</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Key</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Confirm</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="delete">Delete</Button>
+                  <Button disabled>Disabled</Button>
+                </>
+              )
+            }
+          `},withIcons:{description:"With Icons",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} icon="download-cloud">Default</Button>
+                  <Button className={sprinkles({ mr: "xs" })} icon="key" kind="key">Key</Button>
+                  <Button className={sprinkles({ mr: "xs" })} icon="download-cloud" kind="confirm">Confirm</Button>
+                  <Button className={sprinkles({ mr: "xs" })} icon="trash" kind="delete">Delete</Button>
+                  <Button icon="download-cloud" disabled>Disabled</Button>
+                </>
+              )
+            }
+          `},spinning:{description:"Spinning",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} spinning>Default</Button>
+                  <Button className={sprinkles({ mr: "xs" })} spinning kind="key">Key</Button>
+                  <Button className={sprinkles({ mr: "xs" })} spinning kind="confirm">Confirm</Button>
+                  <Button spinning kind="delete">Delete</Button>
+                </>
+              )
+            }
+          `}}},dropdown:{label:"Dropdown Buttons",description:"Use these for actions that need to select an option to proceed. Example: Download button with optiosn related to the file format (PDF, PPT, etc.).",examples:{withoutIcons:{description:"Without Icons",react:m.code`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      label="Default"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      kind={ButtonKind.KEY}
+                      label="Key"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      kind={ButtonKind.CONFIRM}
+                      label="Confirm"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      kind={ButtonKind.DELETE}
+                      label="Delete"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      disabled
+                      label="Disabled"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `},withIcons:{description:"With Icons",react:m.code`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      label="Default"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      kind={ButtonKind.KEY}
+                      label="Key"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      kind={ButtonKind.CONFIRM}
+                      label="Confirm"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.TRASH}
+                      kind={ButtonKind.DELETE}
+                      label="Delete"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                      className="mr-1 mb-1"
+                      icon={SpsIcon.DOWNLOAD_CLOUD}
+                      disabled
+                      label="Disabled"
+                      options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `},spinning:{description:"Spinning",react:m.code`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    label="Default"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.KEY}
+                    label="Key"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.CONFIRM}
+                    label="Confirm"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                  <SpsDropdown
+                    spinning
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.DELETE}
+                    label="Delete"
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `}}},splitButtons:{label:"Split Buttons",description:"Use when there is 1 primary action and other related actions can be taken.",examples:{withoutIcons:{description:"Without Icons",react:m.code`
+            import { SpsSplitButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsSplitButton className="mr-1 mb-1" label="Default" />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.KEY}
+                    label="Key"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.CONFIRM}
+                    label="Confirm"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.DELETE}
+                    label="Delete"
+                  />
+                  <SpsSplitButton className="mr-1 mb-1" disabled label="Disabled" />
+                </>
+              )
+            }
+          `},withIcons:{description:"With Icons",react:m.code`
+            import { SpsSplitButton } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    label="Default"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    kind={ButtonKind.KEY}
+                    label="Key"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    kind={ButtonKind.CONFIRM}
+                    label="Confirm"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    kind={ButtonKind.DELETE}
+                    label="Delete"
+                  />
+                  <SpsSplitButton
+                    className="mr-1 mb-1"
+                    icon={SpsIcon.PLUS_SIGN}
+                    disabled
+                    label="Disabled"
+                  />
+                </>
+              )
+            }
+          `}}},iconButtons:{label:"Icon Buttons",description:({NavigateTo:e,Link:t})=>d.createElement(d.Fragment,null,d.createElement("p",null,"Use these for quick actions that can clearly be articulated by the use of an icon. Example: A Print button in the"," ",d.createElement(e,{to:"list-action-bar"},"List Action Bar"),". Do not use an icon that doesn't have a universally understood meaning; instead use a Basic Button or a Basic Button with an icon. ",d.createElement(t,{to:"/style-and-layout/icons/"},"View All Icons"))),examples:{standard:{description:"Standard Icon Buttons",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="printer" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="pencil" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="x" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="trash" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="gear" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="download-cloud" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="search" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="plus-sign" />
+                  <Button className={sprinkles({ mr: "xs" })} kind="icon" icon="minus" />
+                </>
+              )
+            }
+          `},dropdown:{description:({NavigateTo:e})=>d.createElement(d.Fragment,null,d.createElement("h5",null,"Dropdown Icon Buttons"),d.createElement("p",null,"Use these when there are several options available for action. Example: Dropdown Icon Button in a ",d.createElement(e,{to:"content-rows"},"Content Row"),".")),react:m.code`
+            import { SpsDropdown } from "@spscommerce/ds-react";
+
+            function Component() {
+              return (
+                <>
+                  <SpsDropdown
+                    className="mr-1 mb-1"
+                    kind={ButtonKind.ICON}
+                    options={[[{ label: "Option A" }, () => console.log("Option A")]]}
+                  />
+                </>
+              )
+            }
+          `},spinner:{description:"Spinner",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="icon" icon="download-cloud" spinning />
+                </>
+              )
+            }
+          `}}},textButtons:{label:"Text Buttons",description:({NavigateTo:e})=>d.createElement("p",null,"Use for less important actions, or ones that aren't taken as frequently. They should not appear inline with other copy. Example: Advanced Search button in the"," ",d.createElement(e,{to:"list-toolbar"},"List Toolbar")),examples:{withoutIcons:{description:"Without Icons",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link">Default</Button>
+                  <Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link">Delete</Button>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link" disabled>Disabled</Button>
+                </>
+              )
+            }
+          `},withIcons:{description:"With Icons",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link" icon="download-cloud">Default</Button>
+                  <Button className={sprinkles({ mr: "sm", color: "red-medium" })} kind="link" icon="trash">Delete</Button>
+                  <Button className={sprinkles({ mr: "sm" })} kind="link" icon="gear" disabled>Disabled</Button>
+                </>
+              )
+            }
+          `},spinner:{description:"Spinner",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="link" spinning>Default</Button>
+                </>
+              )
+            }
+          `}}},submitButtons:{label:"Submit Buttons",description:({NavigateTo:e})=>d.createElement("p",null,"Use to submit a form. There can be a number of visual variations, for example a"," ",d.createElement(e,{to:"modals"},"Modal")," uses Basic Button (Key) as its Submit Button."),examples:{basic:{react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              const { formMeta, formValue, updateForm } = useSpsForm({});
+
+              function alertOnSubmit() {
+                window.alert("Form submitted");
+              }
+
+              return (
+                <SpsForm formMeta={formMeta} onSubmit={alertOnSubmit}>
+                {/* Use only one Submit button in your form */}
+                  <Button className={sprinkles({ mr: "xs" })} type="submit" kind="key">Key</Button>
+                  <Button type="submit" kind="confirm">Confirm</Button>
+                </SpsForm>
+              )
+            }
+          `}}},link:{label:"Button as a Link",description:"Used to link to another page, such as an external website. They may open in the same window or in a new one. It should only be used when a Text Button doesn't provide enough visual emphasis.",examples:{basic:{react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="default" href="https://google.com">
+                    Button Text
+                  </Button>
+                </>
+              )
+            }
+          `}}},buttonGroups:{label:"Button Groups",description:({NavigateTo:e})=>d.createElement("p",null,"Use button groups when there are a number of actions that can be taken in a view. When there are multiple button types in a group, they are separated using dividers. Example: Button groups in ",d.createElement(e,{to:"List Action Bar"},"List Action Bar"),"."),examples:{basic:{description:"Basic Button Groups",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })}>Cancel</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Save</Button>
+                </>
+              )
+            }
+          `},icon:{description:"Icon Button Groups",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="icon" icon="pencil" />
+                  <Button kind="icon" icon="trash" />
+                </>
+              )
+            }
+          `},textAndIcons:{description:"Text Buttons + Icon Buttons Group",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="link">Text Button</Button>
+                  <VerticalRule />
+                  <Button kind="icon" icon="download-cloud" />
+                  <Button kind="icon" icon="printer" />
+                </>
+              )
+            }
+          `},textAndBasic:{description:"Text Buttons + Basic Buttons Group",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="link">Text Button</Button>
+                  <VerticalRule />
+                  <Button className={sprinkles({ ml: "xs", mr: "xs" })} kind="default">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Button</Button>
+                </>
+              )
+            }
+          `},iconsAndBasic:{description:"Icon Buttons + Basic Buttons Group",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button kind="icon" icon="download-cloud" />
+                  <Button kind="icon" icon="printer" />
+                  <VerticalRule />
+                  <Button className={sprinkles({ ml: "xs", mr: "xs" })} kind="default">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Button</Button>
+                </>
+              )
+            }
+          `},textIconsAndBasic:{description:"Text Buttons + Icon Buttons + Basic Buttons Group",react:m.code`
+            import { Button } from "@sps-woodland/buttons";
+            import { sprinkles } from "@sps-woodland/tokens";
+            import { VericalRule } from "@sps-woodland/core";
+
+            function Component() {
+              return (
+                <>
+                  <Button className={sprinkles({ mr: "xs" })} kind="link">Text Button</Button>
+                  <VerticalRule />
+                  <Button kind="icon" icon="download-cloud" />
+                  <Button kind="icon" icon="printer" />
+                  <VerticalRule />
+                  <Button className={sprinkles({ ml: "xs", mr: "xs" })} kind="default">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="key">Button</Button>
+                  <Button className={sprinkles({ mr: "xs" })} kind="confirm">Button</Button>
+                </>
+              )
+            }
+          `}}}}},Xt={Buttons:qt};exports.Button=de;exports.MANIFEST=Xt;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./button/Button";
+export * from "./manifest";