@telegraph/button 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @telegraph/button
 
+## 0.3.3
+
+### Patch Changes
+
+- [#643](https://github.com/knocklabs/telegraph/pull/643) [`0c44b7c`](https://github.com/knocklabs/telegraph/commit/0c44b7ce809b4d5c37ea13ef31d95197f8ad0777) Thanks [@kylemcd](https://github.com/kylemcd)! - fix: outline button has no bg color when focused
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`8ceb949`](https://github.com/knocklabs/telegraph/commit/8ceb949883d1df0bc279af1cbbdaead64a25e49e)]:
+  - @telegraph/style-engine@0.2.1
+  - @telegraph/layout@0.3.1
+  - @telegraph/typography@0.1.27
+  - @telegraph/icon@0.3.2
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),P=require("@telegraph/helpers"),w=require("@telegraph/icon"),R=require("@telegraph/layout"),B=require("@telegraph/style-engine"),M=require("@telegraph/typography"),m=require("clsx"),b=require("react"),L={default_buttonShadowColor:{cssVar:"--box-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_buttonShadowColor:{cssVar:"--tgph-button-hover-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},focus_buttonShadowColor:{cssVar:"--tgph-button-focus-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},active_buttonShadowColor:{cssVar:"--tgph-button-active-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_textColor:{cssVar:"--tgph-button-hover-text-color",value:"var(--tgph-VARIABLE)"}},q={solid:{default:{backgroundColor:"gray-12",hover_backgroundColor:"gray-11",focus_backgroundColor:"gray-10",active_backgroundColor:"gray-10",hover_textColor:"white"},accent:{backgroundColor:"accent-9",hover_backgroundColor:"accent-10",focus_backgroundColor:"accent-11",active_backgroundColor:"accent-11",hover_textColor:"white"},red:{backgroundColor:"red-9",hover_backgroundColor:"red-10",focus_backgroundColor:"red-11",active_backgroundColor:"red-11",hover_textColor:"white"},gray:{backgroundColor:"gray-9",hover_backgroundColor:"gray-10",focus_backgroundColor:"gray-11",active_backgroundColor:"gray-11",hover_textColor:"white"},green:{backgroundColor:"green-9",hover_backgroundColor:"green-10",focus_backgroundColor:"green-11",active_backgroundColor:"green-11",hover_textColor:"white"},blue:{backgroundColor:"blue-9",hover_backgroundColor:"blue-10",focus_backgroundColor:"blue-11",active_backgroundColor:"blue-11",hover_textColor:"white"},yellow:{backgroundColor:"yellow-9",hover_backgroundColor:"yellow-10",focus_backgroundColor:"yellow-11",active_backgroundColor:"yellow-11",hover_textColor:"white"},purple:{backgroundColor:"purple-9",hover_backgroundColor:"purple-10",focus_backgroundColor:"purple-11",active_backgroundColor:"purple-11",hover_textColor:"white"}},soft:{default:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},gray:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},red:{backgroundColor:"red-3",hover_backgroundColor:"red-4",focus_backgroundColor:"red-5",active_backgroundColor:"red-5",hover_textColor:"red-11"},accent:{backgroundColor:"accent-3",hover_backgroundColor:"accent-4",focus_backgroundColor:"accent-5",active_backgroundColor:"accent-5",hover_textColor:"accent-11"},green:{backgroundColor:"green-3",hover_backgroundColor:"green-4",focus_backgroundColor:"green-5",active_backgroundColor:"green-5",hover_textColor:"green-11"},blue:{backgroundColor:"blue-3",hover_backgroundColor:"blue-4",focus_backgroundColor:"blue-5",active_backgroundColor:"blue-5",hover_textColor:"blue-11"},yellow:{backgroundColor:"yellow-3",hover_backgroundColor:"yellow-4",focus_backgroundColor:"yellow-5",active_backgroundColor:"yellow-5",hover_textColor:"yellow-11"},purple:{backgroundColor:"purple-3",hover_backgroundColor:"purple-4",focus_backgroundColor:"purple-5",active_backgroundColor:"purple-5",hover_textColor:"purple-11"}},outline:{default:{backgroundColor:"surface-1",hover_backgroundColor:"gray-2",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},gray:{backgroundColor:"surface-1",hover_backgroundColor:"gray-2",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},red:{backgroundColor:"surface-1",hover_backgroundColor:"red-2",default_buttonShadowColor:"red-6",hover_buttonShadowColor:"red-7",focus_buttonShadowColor:"red-8",active_buttonShadowColor:"red-8",hover_textColor:"red-11"},accent:{backgroundColor:"surface-1",hover_backgroundColor:"accent-2",default_buttonShadowColor:"accent-6",hover_buttonShadowColor:"accent-7",focus_buttonShadowColor:"accent-8",active_buttonShadowColor:"accent-8",hover_textColor:"accent-11"},green:{backgroundColor:"surface-1",hover_backgroundColor:"green-2",default_buttonShadowColor:"green-6",hover_buttonShadowColor:"green-7",focus_buttonShadowColor:"green-8",active_buttonShadowColor:"green-8",hover_textColor:"green-11"},blue:{backgroundColor:"surface-1",hover_backgroundColor:"blue-2",default_buttonShadowColor:"blue-6",hover_buttonShadowColor:"blue-7",focus_buttonShadowColor:"blue-8",active_buttonShadowColor:"blue-8",hover_textColor:"blue-11"},yellow:{backgroundColor:"surface-1",hover_backgroundColor:"yellow-2",default_buttonShadowColor:"yellow-6",hover_buttonShadowColor:"yellow-7",focus_buttonShadowColor:"yellow-8",active_buttonShadowColor:"yellow-8",hover_textColor:"yellow-11"},purple:{backgroundColor:"surface-1",hover_backgroundColor:"purple-2",default_buttonShadowColor:"purple-6",hover_buttonShadowColor:"purple-7",focus_buttonShadowColor:"purple-8",active_buttonShadowColor:"purple-8",hover_textColor:"purple-11"}},ghost:{default:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},gray:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},red:{backgroundColor:"transparent",hover_backgroundColor:"red-3",focus_backgroundColor:"red-4",active_backgroundColor:"red-4",hover_textColor:"red-11"},accent:{backgroundColor:"transparent",hover_backgroundColor:"accent-3",focus_backgroundColor:"accent-4",active_backgroundColor:"accent-4",hover_textColor:"accent-11"},green:{backgroundColor:"transparent",hover_backgroundColor:"green-3",focus_backgroundColor:"green-4",active_backgroundColor:"green-4",hover_textColor:"green-11"},blue:{backgroundColor:"transparent",hover_backgroundColor:"blue-3",focus_backgroundColor:"blue-4",active_backgroundColor:"blue-4",hover_textColor:"blue-11"},yellow:{backgroundColor:"transparent",hover_backgroundColor:"yellow-3",focus_backgroundColor:"yellow-4",active_backgroundColor:"yellow-4",hover_textColor:"yellow-11"},purple:{backgroundColor:"transparent",hover_backgroundColor:"purple-3",focus_backgroundColor:"purple-4",active_backgroundColor:"purple-4",hover_textColor:"purple-11"}}},N={default:{0:{w:"auto",h:"5",gap:"0_5",px:"1",rounded:"2"},1:{w:"auto",h:"6",gap:"1",px:"1_5",rounded:"2"},2:{w:"auto",h:"8",gap:"1_5",px:"2",rounded:"2"},3:{w:"auto",h:"10",gap:"2",px:"3",rounded:"3"}},"icon-only":{0:{w:"5",h:"5",gap:"0",px:"0",rounded:"2"},1:{w:"6",h:"6",gap:"0",px:"0",rounded:"2"},2:{w:"8",h:"8",gap:"0",px:"0",rounded:"2"},3:{w:"10",h:"10",gap:"0",px:"0",rounded:"3"}}},z={0:"0",1:"1",2:"2",3:"3"},D={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},f={0:"0",1:"1",2:"2",3:"3"},x={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"gray",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},S={default:"secondary","icon-only":"primary"},v=b.createContext({variant:"solid",size:"2",color:"default",state:"default",layout:"default",active:!1}),Z=o=>o.disabled?"disabled":o.state==="loading"?"loading":o.active?"active":o.state,A=({as:o,variant:r="solid",size:t="2",color:e="default",state:n="default",active:a=!1,type:u="button",disabled:d,className:c,children:g,style:h,...V})=>{const j=Z({state:n,disabled:d,active:a}),s=P.useDeterminateState({value:j,determinateValue:"loading",minDurationMs:1200}),{styleProp:E,otherProps:O}=B.useStyleEngine({props:{...q[r][e],style:h},cssVars:L}),y=d||!o?"button":o,i=b.useMemo(()=>{var k;const C=b.Children.toArray(g);if((C==null?void 0:C.length)===1&&b.isValidElement(C[0])){const _=C[0];if((k=_==null?void 0:_.props)!=null&&k.icon)return"icon-only"}return"default"},[g]);return l.jsx(v.Provider,{value:{variant:r,size:t,color:e,state:s,layout:i,active:a},children:l.jsxs(R.Stack,{as:y,className:m("tgph-button",c),display:"inline-flex",align:"center",justify:"center",...N[i][t],style:E,"data-tgph-button":!0,"data-tgph-button-layout":i,"data-tgph-button-state":s,"data-tgph-button-variant":r,"data-tgph-button-color":e,disabled:s==="disabled"||s==="loading",...y==="button"&&{type:u},...O,...V,children:[s==="loading"&&l.jsx(w.Spinner,{size:f[t],color:x[r][e],variant:S[i],"data-tgph-button-loading-icon":!0}),g]})})},p=({size:o,color:r,variant:t,icon:e,alt:n,"aria-hidden":a,internal_iconType:u,...d})=>{const c=b.useContext(v),g={size:o??f[c.size],color:r??x[c.variant][c.state==="disabled"?"disabled":c.color],variant:t??S[c.layout]},h=n?{alt:n}:{"aria-hidden":a};return c.state==="loading"&&u==="leading"?null:l.jsx(w.Icon,{icon:e,"data-button-icon":!0,"data-button-icon-color":g.color,...h,...g,...d})},I=({as:o,color:r,size:t,weight:e="medium",style:n,...a})=>{const u=b.useContext(v),d=r??D[u.variant][u.state==="disabled"?"disabled":u.color];return l.jsx(M.Text,{as:o||"span",color:d,size:t??z[u.size],weight:e,internal_optionalAs:!0,"data-button-text":!0,"data-button-text-color":d,style:{textDecoration:"none",whiteSpace:"nowrap",...n},...a})},T=({leadingIcon:o,trailingIcon:r,icon:t,children:e,...n})=>{const a=o||t;return l.jsxs(A,{...n,children:[a&&l.jsx(p,{...a,internal_iconType:"leading"}),e&&l.jsx(I,{children:e}),r&&l.jsx(p,{...r,internal_iconType:"trailing"})]})};Object.assign(T,{Root:A,Icon:p,Text:I});const U=T;exports.Button=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),P=require("@telegraph/helpers"),w=require("@telegraph/icon"),R=require("@telegraph/layout"),B=require("@telegraph/style-engine"),M=require("@telegraph/typography"),m=require("clsx"),b=require("react"),L={default_buttonShadowColor:{cssVar:"--box-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_buttonShadowColor:{cssVar:"--tgph-button-hover-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},focus_buttonShadowColor:{cssVar:"--tgph-button-focus-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},active_buttonShadowColor:{cssVar:"--tgph-button-active-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_textColor:{cssVar:"--tgph-button-hover-text-color",value:"var(--tgph-VARIABLE)"}},q={solid:{default:{backgroundColor:"gray-12",hover_backgroundColor:"gray-11",focus_backgroundColor:"gray-10",active_backgroundColor:"gray-10",hover_textColor:"white"},accent:{backgroundColor:"accent-9",hover_backgroundColor:"accent-10",focus_backgroundColor:"accent-11",active_backgroundColor:"accent-11",hover_textColor:"white"},red:{backgroundColor:"red-9",hover_backgroundColor:"red-10",focus_backgroundColor:"red-11",active_backgroundColor:"red-11",hover_textColor:"white"},gray:{backgroundColor:"gray-9",hover_backgroundColor:"gray-10",focus_backgroundColor:"gray-11",active_backgroundColor:"gray-11",hover_textColor:"white"},green:{backgroundColor:"green-9",hover_backgroundColor:"green-10",focus_backgroundColor:"green-11",active_backgroundColor:"green-11",hover_textColor:"white"},blue:{backgroundColor:"blue-9",hover_backgroundColor:"blue-10",focus_backgroundColor:"blue-11",active_backgroundColor:"blue-11",hover_textColor:"white"},yellow:{backgroundColor:"yellow-9",hover_backgroundColor:"yellow-10",focus_backgroundColor:"yellow-11",active_backgroundColor:"yellow-11",hover_textColor:"white"},purple:{backgroundColor:"purple-9",hover_backgroundColor:"purple-10",focus_backgroundColor:"purple-11",active_backgroundColor:"purple-11",hover_textColor:"white"}},soft:{default:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},gray:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},red:{backgroundColor:"red-3",hover_backgroundColor:"red-4",focus_backgroundColor:"red-5",active_backgroundColor:"red-5",hover_textColor:"red-11"},accent:{backgroundColor:"accent-3",hover_backgroundColor:"accent-4",focus_backgroundColor:"accent-5",active_backgroundColor:"accent-5",hover_textColor:"accent-11"},green:{backgroundColor:"green-3",hover_backgroundColor:"green-4",focus_backgroundColor:"green-5",active_backgroundColor:"green-5",hover_textColor:"green-11"},blue:{backgroundColor:"blue-3",hover_backgroundColor:"blue-4",focus_backgroundColor:"blue-5",active_backgroundColor:"blue-5",hover_textColor:"blue-11"},yellow:{backgroundColor:"yellow-3",hover_backgroundColor:"yellow-4",focus_backgroundColor:"yellow-5",active_backgroundColor:"yellow-5",hover_textColor:"yellow-11"},purple:{backgroundColor:"purple-3",hover_backgroundColor:"purple-4",focus_backgroundColor:"purple-5",active_backgroundColor:"purple-5",hover_textColor:"purple-11"}},outline:{default:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"gray-2",active_backgroundColor:"gray-3",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},gray:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"gray-2",active_backgroundColor:"gray-3",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},red:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"red-2",active_backgroundColor:"red-3",default_buttonShadowColor:"red-6",hover_buttonShadowColor:"red-7",focus_buttonShadowColor:"red-8",active_buttonShadowColor:"red-8",hover_textColor:"red-11"},accent:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"accent-2",active_backgroundColor:"accent-3",default_buttonShadowColor:"accent-6",hover_buttonShadowColor:"accent-7",focus_buttonShadowColor:"accent-8",active_buttonShadowColor:"accent-8",hover_textColor:"accent-11"},green:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"green-2",active_backgroundColor:"green-3",default_buttonShadowColor:"green-6",hover_buttonShadowColor:"green-7",focus_buttonShadowColor:"green-8",active_buttonShadowColor:"green-8",hover_textColor:"green-11"},blue:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"blue-2",active_backgroundColor:"blue-3",default_buttonShadowColor:"blue-6",hover_buttonShadowColor:"blue-7",focus_buttonShadowColor:"blue-8",active_buttonShadowColor:"blue-8",hover_textColor:"blue-11"},yellow:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"yellow-2",active_backgroundColor:"yellow-3",default_buttonShadowColor:"yellow-6",hover_buttonShadowColor:"yellow-7",focus_buttonShadowColor:"yellow-8",active_buttonShadowColor:"yellow-8",hover_textColor:"yellow-11"},purple:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"purple-2",active_backgroundColor:"purple-3",default_buttonShadowColor:"purple-6",hover_buttonShadowColor:"purple-7",focus_buttonShadowColor:"purple-8",active_buttonShadowColor:"purple-8",hover_textColor:"purple-11"}},ghost:{default:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},gray:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},red:{backgroundColor:"transparent",hover_backgroundColor:"red-3",focus_backgroundColor:"red-4",active_backgroundColor:"red-4",hover_textColor:"red-11"},accent:{backgroundColor:"transparent",hover_backgroundColor:"accent-3",focus_backgroundColor:"accent-4",active_backgroundColor:"accent-4",hover_textColor:"accent-11"},green:{backgroundColor:"transparent",hover_backgroundColor:"green-3",focus_backgroundColor:"green-4",active_backgroundColor:"green-4",hover_textColor:"green-11"},blue:{backgroundColor:"transparent",hover_backgroundColor:"blue-3",focus_backgroundColor:"blue-4",active_backgroundColor:"blue-4",hover_textColor:"blue-11"},yellow:{backgroundColor:"transparent",hover_backgroundColor:"yellow-3",focus_backgroundColor:"yellow-4",active_backgroundColor:"yellow-4",hover_textColor:"yellow-11"},purple:{backgroundColor:"transparent",hover_backgroundColor:"purple-3",focus_backgroundColor:"purple-4",active_backgroundColor:"purple-4",hover_textColor:"purple-11"}}},N={default:{0:{w:"auto",h:"5",gap:"0_5",px:"1",rounded:"2"},1:{w:"auto",h:"6",gap:"1",px:"1_5",rounded:"2"},2:{w:"auto",h:"8",gap:"1_5",px:"2",rounded:"2"},3:{w:"auto",h:"10",gap:"2",px:"3",rounded:"3"}},"icon-only":{0:{w:"5",h:"5",gap:"0",px:"0",rounded:"2"},1:{w:"6",h:"6",gap:"0",px:"0",rounded:"2"},2:{w:"8",h:"8",gap:"0",px:"0",rounded:"2"},3:{w:"10",h:"10",gap:"0",px:"0",rounded:"3"}}},z={0:"0",1:"1",2:"2",3:"3"},D={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},f={0:"0",1:"1",2:"2",3:"3"},x={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"gray",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},S={default:"secondary","icon-only":"primary"},p=b.createContext({variant:"solid",size:"2",color:"default",state:"default",layout:"default",active:!1}),Z=o=>o.disabled?"disabled":o.state==="loading"?"loading":o.active?"active":o.state,A=({as:o,variant:r="solid",size:t="2",color:e="default",state:u="default",active:a=!1,type:n="button",disabled:d,className:c,children:g,style:i,...V})=>{const j=Z({state:u,disabled:d,active:a}),s=P.useDeterminateState({value:j,determinateValue:"loading",minDurationMs:1200}),{styleProp:E,otherProps:O}=B.useStyleEngine({props:{...q[r][e],style:i},cssVars:L}),k=d||!o?"button":o,_=b.useMemo(()=>{var y;const C=b.Children.toArray(g);if((C==null?void 0:C.length)===1&&b.isValidElement(C[0])){const h=C[0];if((y=h==null?void 0:h.props)!=null&&y.icon)return"icon-only"}return"default"},[g]);return l.jsx(p.Provider,{value:{variant:r,size:t,color:e,state:s,layout:_,active:a},children:l.jsxs(R.Stack,{as:k,className:m("tgph-button",c),display:"inline-flex",align:"center",justify:"center",...N[_][t],style:E,"data-tgph-button":!0,"data-tgph-button-layout":_,"data-tgph-button-state":s,"data-tgph-button-variant":r,"data-tgph-button-color":e,disabled:s==="disabled"||s==="loading",...k==="button"&&{type:n},...O,...V,children:[s==="loading"&&l.jsx(w.Spinner,{size:f[t],color:x[r][e],variant:S[_],"data-tgph-button-loading-icon":!0}),g]})})},v=({size:o,color:r,variant:t,icon:e,alt:u,"aria-hidden":a,internal_iconType:n,...d})=>{const c=b.useContext(p),g={size:o??f[c.size],color:r??x[c.variant][c.state==="disabled"?"disabled":c.color],variant:t??S[c.layout]},i=u?{alt:u}:{"aria-hidden":a};return c.state==="loading"&&n==="leading"?null:l.jsx(w.Icon,{icon:e,"data-button-icon":!0,"data-button-icon-color":g.color,...i,...g,...d})},I=({as:o,color:r,size:t,weight:e="medium",style:u,...a})=>{const n=b.useContext(p),d=r??D[n.variant][n.state==="disabled"?"disabled":n.color];return l.jsx(M.Text,{as:o||"span",color:d,size:t??z[n.size],weight:e,internal_optionalAs:!0,"data-button-text":!0,"data-button-text-color":d,style:{textDecoration:"none",whiteSpace:"nowrap",...u},...a})},T=({leadingIcon:o,trailingIcon:r,icon:t,children:e,...u})=>{const a=o||t;return l.jsxs(A,{...u,children:[a&&l.jsx(v,{...a,internal_iconType:"leading"}),e&&l.jsx(I,{children:e}),r&&l.jsx(v,{...r,internal_iconType:"trailing"})]})};Object.assign(T,{Root:A,Icon:v,Text:I});const U=T;exports.Button=U;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n  default_buttonShadowColor: keyof typeof tokens.color;\n  hover_buttonShadowColor: keyof typeof tokens.color;\n  focus_buttonShadowColor: keyof typeof tokens.color;\n  active_buttonShadowColor: keyof typeof tokens.color;\n  hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n  default_buttonShadowColor: {\n    cssVar: \"--box-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_buttonShadowColor: {\n    cssVar: \"--tgph-button-hover-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  focus_buttonShadowColor: {\n    cssVar: \"--tgph-button-focus-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  active_buttonShadowColor: {\n    cssVar: \"--tgph-button-active-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_textColor: {\n    cssVar: \"--tgph-button-hover-text-color\",\n    value: \"var(--tgph-VARIABLE)\",\n  },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n  solid: {\n    default: {\n      backgroundColor: \"gray-12\",\n      hover_backgroundColor: \"gray-11\",\n      focus_backgroundColor: \"gray-10\",\n      active_backgroundColor: \"gray-10\",\n      hover_textColor: \"white\",\n    },\n    accent: {\n      backgroundColor: \"accent-9\",\n      hover_backgroundColor: \"accent-10\",\n      focus_backgroundColor: \"accent-11\",\n      active_backgroundColor: \"accent-11\",\n      hover_textColor: \"white\",\n    },\n    red: {\n      backgroundColor: \"red-9\",\n      hover_backgroundColor: \"red-10\",\n      focus_backgroundColor: \"red-11\",\n      active_backgroundColor: \"red-11\",\n      hover_textColor: \"white\",\n    },\n    gray: {\n      backgroundColor: \"gray-9\",\n      hover_backgroundColor: \"gray-10\",\n      focus_backgroundColor: \"gray-11\",\n      active_backgroundColor: \"gray-11\",\n      hover_textColor: \"white\",\n    },\n    green: {\n      backgroundColor: \"green-9\",\n      hover_backgroundColor: \"green-10\",\n      focus_backgroundColor: \"green-11\",\n      active_backgroundColor: \"green-11\",\n      hover_textColor: \"white\",\n    },\n    blue: {\n      backgroundColor: \"blue-9\",\n      hover_backgroundColor: \"blue-10\",\n      focus_backgroundColor: \"blue-11\",\n      active_backgroundColor: \"blue-11\",\n      hover_textColor: \"white\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-9\",\n      hover_backgroundColor: \"yellow-10\",\n      focus_backgroundColor: \"yellow-11\",\n      active_backgroundColor: \"yellow-11\",\n      hover_textColor: \"white\",\n    },\n    purple: {\n      backgroundColor: \"purple-9\",\n      hover_backgroundColor: \"purple-10\",\n      focus_backgroundColor: \"purple-11\",\n      active_backgroundColor: \"purple-11\",\n      hover_textColor: \"white\",\n    },\n  },\n  soft: {\n    default: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"red-3\",\n      hover_backgroundColor: \"red-4\",\n      focus_backgroundColor: \"red-5\",\n      active_backgroundColor: \"red-5\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"accent-3\",\n      hover_backgroundColor: \"accent-4\",\n      focus_backgroundColor: \"accent-5\",\n      active_backgroundColor: \"accent-5\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"green-3\",\n      hover_backgroundColor: \"green-4\",\n      focus_backgroundColor: \"green-5\",\n      active_backgroundColor: \"green-5\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"blue-3\",\n      hover_backgroundColor: \"blue-4\",\n      focus_backgroundColor: \"blue-5\",\n      active_backgroundColor: \"blue-5\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-3\",\n      hover_backgroundColor: \"yellow-4\",\n      focus_backgroundColor: \"yellow-5\",\n      active_backgroundColor: \"yellow-5\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"purple-3\",\n      hover_backgroundColor: \"purple-4\",\n      focus_backgroundColor: \"purple-5\",\n      active_backgroundColor: \"purple-5\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  outline: {\n    default: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"red-2\",\n      default_buttonShadowColor: \"red-6\",\n      hover_buttonShadowColor: \"red-7\",\n      focus_buttonShadowColor: \"red-8\",\n      active_buttonShadowColor: \"red-8\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"accent-2\",\n      default_buttonShadowColor: \"accent-6\",\n      hover_buttonShadowColor: \"accent-7\",\n      focus_buttonShadowColor: \"accent-8\",\n      active_buttonShadowColor: \"accent-8\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"green-2\",\n      default_buttonShadowColor: \"green-6\",\n      hover_buttonShadowColor: \"green-7\",\n      focus_buttonShadowColor: \"green-8\",\n      active_buttonShadowColor: \"green-8\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"blue-2\",\n      default_buttonShadowColor: \"blue-6\",\n      hover_buttonShadowColor: \"blue-7\",\n      focus_buttonShadowColor: \"blue-8\",\n      active_buttonShadowColor: \"blue-8\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"yellow-2\",\n      default_buttonShadowColor: \"yellow-6\",\n      hover_buttonShadowColor: \"yellow-7\",\n      focus_buttonShadowColor: \"yellow-8\",\n      active_buttonShadowColor: \"yellow-8\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"purple-2\",\n      default_buttonShadowColor: \"purple-6\",\n      hover_buttonShadowColor: \"purple-7\",\n      focus_buttonShadowColor: \"purple-8\",\n      active_buttonShadowColor: \"purple-8\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  ghost: {\n    default: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"red-3\",\n      focus_backgroundColor: \"red-4\",\n      active_backgroundColor: \"red-4\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"accent-3\",\n      focus_backgroundColor: \"accent-4\",\n      active_backgroundColor: \"accent-4\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"green-3\",\n      focus_backgroundColor: \"green-4\",\n      active_backgroundColor: \"green-4\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"blue-3\",\n      focus_backgroundColor: \"blue-4\",\n      active_backgroundColor: \"blue-4\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"yellow-3\",\n      focus_backgroundColor: \"yellow-4\",\n      active_backgroundColor: \"yellow-4\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"purple-3\",\n      focus_backgroundColor: \"purple-4\",\n      active_backgroundColor: \"purple-4\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n  default: {\n    \"0\": {\n      w: \"auto\",\n      h: \"5\",\n      gap: \"0_5\",\n      px: \"1\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"auto\",\n      h: \"6\",\n      gap: \"1\",\n      px: \"1_5\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"auto\",\n      h: \"8\",\n      gap: \"1_5\",\n      px: \"2\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"auto\",\n      h: \"10\",\n      gap: \"2\",\n      px: \"3\",\n      rounded: \"3\",\n    },\n  },\n  \"icon-only\": {\n    \"0\": {\n      w: \"5\",\n      h: \"5\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"6\",\n      h: \"6\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"8\",\n      h: \"8\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"10\",\n      h: \"10\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"3\",\n    },\n  },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"gray\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n  default: \"secondary\",\n  \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n  type PolymorphicProps,\n  type PolymorphicPropsWithTgphRef,\n  RemappedOmit,\n  type Required,\n  type TgphComponentProps,\n  type TgphElement,\n  useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n  BUTTON_COLOR_MAP,\n  BUTTON_SIZE_MAP,\n  type ButtonColor,\n  type ButtonSize,\n  type ButtonVariant,\n  ICON_COLOR_MAP,\n  ICON_SIZE_MAP,\n  ICON_VARIANT_MAP,\n  TEXT_COLOR_MAP,\n  TEXT_SIZE_MAP,\n  cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  state?: \"default\" | \"loading\";\n  active?: boolean;\n};\n\ntype InternalProps = {\n  layout: \"default\" | \"icon-only\";\n  color: Required<RootBaseProps>[\"color\"];\n  state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof Stack>,\n  \"tgphRef\"\n> &\n  PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n  RootBaseProps;\n\nconst ButtonContext = React.createContext<\n  Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n  variant: \"solid\",\n  size: \"2\",\n  color: \"default\",\n  state: \"default\",\n  layout: \"default\",\n  active: false,\n});\n\ntype DeriveStateParams = {\n  state: Required<RootBaseProps>[\"state\"];\n  disabled?: boolean;\n  active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n  if (params.disabled) return \"disabled\";\n  if (params.state === \"loading\") return \"loading\";\n  if (params.active) return \"active\";\n  return params.state;\n};\n\nconst Root = <T extends TgphElement>({\n  as,\n  variant = \"solid\",\n  size = \"2\",\n  color = \"default\",\n  state: stateProp = \"default\",\n  active = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  style,\n  ...props\n}: RootProps<T>) => {\n  const derivedState = deriveState({ state: stateProp, disabled, active });\n  const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n    value: derivedState,\n    determinateValue: \"loading\",\n    minDurationMs: 1200,\n  });\n\n  const { styleProp, otherProps } = useStyleEngine({\n    props: {\n      ...BUTTON_COLOR_MAP[variant][color],\n      style,\n    },\n    cssVars,\n  });\n\n  // If the button is in a disabled state, we don't want any clicks to fire.\n  // To do this reliably, we convert the element back to a button if it is\n  // disabled. We do this so we can use the native button element's disabled\n  // state to prevent clicks.\n  // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n  const derivedAs = disabled || !as ? \"button\" : as;\n\n  const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n    const childrenArray = React.Children.toArray(children);\n    if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n      const child = childrenArray[0] as\n        | React.ReactComponentElement<typeof Icon>\n        | {\n            props: {\n              icon: undefined;\n            };\n          };\n      if (child?.props?.icon) {\n        return \"icon-only\";\n      }\n    }\n    return \"default\";\n  }, [children]);\n\n  return (\n    <ButtonContext.Provider\n      value={{ variant, size, color, state, layout, active }}\n    >\n      <Stack\n        as={derivedAs}\n        className={clsx(\"tgph-button\", className)}\n        display=\"inline-flex\"\n        align=\"center\"\n        justify=\"center\"\n        {...BUTTON_SIZE_MAP[layout][size]}\n        style={styleProp}\n        data-tgph-button\n        data-tgph-button-layout={layout}\n        data-tgph-button-state={state}\n        data-tgph-button-variant={variant}\n        data-tgph-button-color={color}\n        disabled={state === \"disabled\" || state === \"loading\"}\n        {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n        {...otherProps}\n        {...props}\n      >\n        {state === \"loading\" && (\n          <Spinner\n            size={ICON_SIZE_MAP[size]}\n            color={ICON_COLOR_MAP[variant][color]}\n            variant={ICON_VARIANT_MAP[layout]}\n            data-tgph-button-loading-icon\n          />\n        )}\n        {children}\n      </Stack>\n    </ButtonContext.Provider>\n  );\n};\n\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n> & {\n  internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\n  size,\n  color,\n  variant,\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  internal_iconType,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(ButtonContext);\n\n  const iconProps = {\n    size: size ?? ICON_SIZE_MAP[context.size],\n    color:\n      color ??\n      ICON_COLOR_MAP[context.variant][\n        context.state === \"disabled\" ? \"disabled\" : context.color\n      ],\n    variant: variant ?? ICON_VARIANT_MAP[context.layout],\n  };\n\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n  // If the button is set to loading and this icon is identified as leading,\n  // we don't want to render this icon and instead the loading icon which\n  // is managed in the root component. We choose to render the loading icon\n  // in the root component so that it displays when there is no icon already\n  // inside of the button.\n  if (context.state === \"loading\" && internal_iconType === \"leading\") {\n    return null;\n  }\n\n  return (\n    <TelegraphIcon\n      icon={icon}\n      data-button-icon\n      data-button-icon-color={iconProps.color}\n      {...a11yProps}\n      {...iconProps}\n      {...props}\n    />\n  );\n};\n\ntype TextProps<T extends TgphElement> = RemappedOmit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as,\n  color,\n  size,\n  weight = \"medium\",\n  style,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(ButtonContext);\n  const derivedColor =\n    color ??\n    TEXT_COLOR_MAP[context.variant][\n      context.state === \"disabled\" ? \"disabled\" : context.color\n    ];\n  return (\n    <TelegraphText\n      as={(as || \"span\") as T}\n      color={derivedColor}\n      size={size ?? TEXT_SIZE_MAP[context.size]}\n      weight={weight}\n      internal_optionalAs={true}\n      data-button-text\n      data-button-text-color={derivedColor}\n      style={{\n        textDecoration: \"none\",\n        whiteSpace: \"nowrap\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n  | {\n      leadingIcon?: DefaultIconProps;\n      trailingIcon?: DefaultIconProps;\n      icon?: never;\n    }\n  | {\n      icon?: DefaultIconProps;\n      leadingIcon?: never;\n      trailingIcon?: never;\n    };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> &\n  BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\n  leadingIcon,\n  trailingIcon,\n  icon,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  const combinedLeadingIcon = leadingIcon || icon;\n  return (\n    <Root {...props}>\n      {combinedLeadingIcon && (\n        <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n      )}\n      {children && <Text>{children}</Text>}\n      {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Icon,\n  Text,\n});\n\nconst Button = Default as typeof Default & {\n  Root: typeof Root;\n  Icon: typeof Icon;\n  Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n  default_buttonShadowColor: keyof typeof tokens.color;\n  hover_buttonShadowColor: keyof typeof tokens.color;\n  focus_buttonShadowColor: keyof typeof tokens.color;\n  active_buttonShadowColor: keyof typeof tokens.color;\n  hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n  default_buttonShadowColor: {\n    cssVar: \"--box-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_buttonShadowColor: {\n    cssVar: \"--tgph-button-hover-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  focus_buttonShadowColor: {\n    cssVar: \"--tgph-button-focus-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  active_buttonShadowColor: {\n    cssVar: \"--tgph-button-active-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_textColor: {\n    cssVar: \"--tgph-button-hover-text-color\",\n    value: \"var(--tgph-VARIABLE)\",\n  },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n  solid: {\n    default: {\n      backgroundColor: \"gray-12\",\n      hover_backgroundColor: \"gray-11\",\n      focus_backgroundColor: \"gray-10\",\n      active_backgroundColor: \"gray-10\",\n      hover_textColor: \"white\",\n    },\n    accent: {\n      backgroundColor: \"accent-9\",\n      hover_backgroundColor: \"accent-10\",\n      focus_backgroundColor: \"accent-11\",\n      active_backgroundColor: \"accent-11\",\n      hover_textColor: \"white\",\n    },\n    red: {\n      backgroundColor: \"red-9\",\n      hover_backgroundColor: \"red-10\",\n      focus_backgroundColor: \"red-11\",\n      active_backgroundColor: \"red-11\",\n      hover_textColor: \"white\",\n    },\n    gray: {\n      backgroundColor: \"gray-9\",\n      hover_backgroundColor: \"gray-10\",\n      focus_backgroundColor: \"gray-11\",\n      active_backgroundColor: \"gray-11\",\n      hover_textColor: \"white\",\n    },\n    green: {\n      backgroundColor: \"green-9\",\n      hover_backgroundColor: \"green-10\",\n      focus_backgroundColor: \"green-11\",\n      active_backgroundColor: \"green-11\",\n      hover_textColor: \"white\",\n    },\n    blue: {\n      backgroundColor: \"blue-9\",\n      hover_backgroundColor: \"blue-10\",\n      focus_backgroundColor: \"blue-11\",\n      active_backgroundColor: \"blue-11\",\n      hover_textColor: \"white\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-9\",\n      hover_backgroundColor: \"yellow-10\",\n      focus_backgroundColor: \"yellow-11\",\n      active_backgroundColor: \"yellow-11\",\n      hover_textColor: \"white\",\n    },\n    purple: {\n      backgroundColor: \"purple-9\",\n      hover_backgroundColor: \"purple-10\",\n      focus_backgroundColor: \"purple-11\",\n      active_backgroundColor: \"purple-11\",\n      hover_textColor: \"white\",\n    },\n  },\n  soft: {\n    default: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"red-3\",\n      hover_backgroundColor: \"red-4\",\n      focus_backgroundColor: \"red-5\",\n      active_backgroundColor: \"red-5\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"accent-3\",\n      hover_backgroundColor: \"accent-4\",\n      focus_backgroundColor: \"accent-5\",\n      active_backgroundColor: \"accent-5\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"green-3\",\n      hover_backgroundColor: \"green-4\",\n      focus_backgroundColor: \"green-5\",\n      active_backgroundColor: \"green-5\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"blue-3\",\n      hover_backgroundColor: \"blue-4\",\n      focus_backgroundColor: \"blue-5\",\n      active_backgroundColor: \"blue-5\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-3\",\n      hover_backgroundColor: \"yellow-4\",\n      focus_backgroundColor: \"yellow-5\",\n      active_backgroundColor: \"yellow-5\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"purple-3\",\n      hover_backgroundColor: \"purple-4\",\n      focus_backgroundColor: \"purple-5\",\n      active_backgroundColor: \"purple-5\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  outline: {\n    default: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      active_backgroundColor: \"gray-3\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      active_backgroundColor: \"gray-3\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"red-2\",\n      active_backgroundColor: \"red-3\",\n      default_buttonShadowColor: \"red-6\",\n      hover_buttonShadowColor: \"red-7\",\n      focus_buttonShadowColor: \"red-8\",\n      active_buttonShadowColor: \"red-8\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"accent-2\",\n      active_backgroundColor: \"accent-3\",\n      default_buttonShadowColor: \"accent-6\",\n      hover_buttonShadowColor: \"accent-7\",\n      focus_buttonShadowColor: \"accent-8\",\n      active_buttonShadowColor: \"accent-8\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"green-2\",\n      active_backgroundColor: \"green-3\",\n      default_buttonShadowColor: \"green-6\",\n      hover_buttonShadowColor: \"green-7\",\n      focus_buttonShadowColor: \"green-8\",\n      active_buttonShadowColor: \"green-8\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"blue-2\",\n      active_backgroundColor: \"blue-3\",\n      default_buttonShadowColor: \"blue-6\",\n      hover_buttonShadowColor: \"blue-7\",\n      focus_buttonShadowColor: \"blue-8\",\n      active_buttonShadowColor: \"blue-8\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"yellow-2\",\n      active_backgroundColor: \"yellow-3\",\n      default_buttonShadowColor: \"yellow-6\",\n      hover_buttonShadowColor: \"yellow-7\",\n      focus_buttonShadowColor: \"yellow-8\",\n      active_buttonShadowColor: \"yellow-8\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"purple-2\",\n      active_backgroundColor: \"purple-3\",\n      default_buttonShadowColor: \"purple-6\",\n      hover_buttonShadowColor: \"purple-7\",\n      focus_buttonShadowColor: \"purple-8\",\n      active_buttonShadowColor: \"purple-8\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  ghost: {\n    default: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"red-3\",\n      focus_backgroundColor: \"red-4\",\n      active_backgroundColor: \"red-4\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"accent-3\",\n      focus_backgroundColor: \"accent-4\",\n      active_backgroundColor: \"accent-4\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"green-3\",\n      focus_backgroundColor: \"green-4\",\n      active_backgroundColor: \"green-4\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"blue-3\",\n      focus_backgroundColor: \"blue-4\",\n      active_backgroundColor: \"blue-4\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"yellow-3\",\n      focus_backgroundColor: \"yellow-4\",\n      active_backgroundColor: \"yellow-4\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"purple-3\",\n      focus_backgroundColor: \"purple-4\",\n      active_backgroundColor: \"purple-4\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n  default: {\n    \"0\": {\n      w: \"auto\",\n      h: \"5\",\n      gap: \"0_5\",\n      px: \"1\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"auto\",\n      h: \"6\",\n      gap: \"1\",\n      px: \"1_5\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"auto\",\n      h: \"8\",\n      gap: \"1_5\",\n      px: \"2\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"auto\",\n      h: \"10\",\n      gap: \"2\",\n      px: \"3\",\n      rounded: \"3\",\n    },\n  },\n  \"icon-only\": {\n    \"0\": {\n      w: \"5\",\n      h: \"5\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"6\",\n      h: \"6\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"8\",\n      h: \"8\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"10\",\n      h: \"10\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"3\",\n    },\n  },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"gray\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n  default: \"secondary\",\n  \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n  type PolymorphicProps,\n  type PolymorphicPropsWithTgphRef,\n  RemappedOmit,\n  type Required,\n  type TgphComponentProps,\n  type TgphElement,\n  useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n  BUTTON_COLOR_MAP,\n  BUTTON_SIZE_MAP,\n  type ButtonColor,\n  type ButtonSize,\n  type ButtonVariant,\n  ICON_COLOR_MAP,\n  ICON_SIZE_MAP,\n  ICON_VARIANT_MAP,\n  TEXT_COLOR_MAP,\n  TEXT_SIZE_MAP,\n  cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  state?: \"default\" | \"loading\";\n  active?: boolean;\n};\n\ntype InternalProps = {\n  layout: \"default\" | \"icon-only\";\n  color: Required<RootBaseProps>[\"color\"];\n  state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof Stack>,\n  \"tgphRef\"\n> &\n  PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n  RootBaseProps;\n\nconst ButtonContext = React.createContext<\n  Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n  variant: \"solid\",\n  size: \"2\",\n  color: \"default\",\n  state: \"default\",\n  layout: \"default\",\n  active: false,\n});\n\ntype DeriveStateParams = {\n  state: Required<RootBaseProps>[\"state\"];\n  disabled?: boolean;\n  active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n  if (params.disabled) return \"disabled\";\n  if (params.state === \"loading\") return \"loading\";\n  if (params.active) return \"active\";\n  return params.state;\n};\n\nconst Root = <T extends TgphElement>({\n  as,\n  variant = \"solid\",\n  size = \"2\",\n  color = \"default\",\n  state: stateProp = \"default\",\n  active = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  style,\n  ...props\n}: RootProps<T>) => {\n  const derivedState = deriveState({ state: stateProp, disabled, active });\n  const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n    value: derivedState,\n    determinateValue: \"loading\",\n    minDurationMs: 1200,\n  });\n\n  const { styleProp, otherProps } = useStyleEngine({\n    props: {\n      ...BUTTON_COLOR_MAP[variant][color],\n      style,\n    },\n    cssVars,\n  });\n\n  // If the button is in a disabled state, we don't want any clicks to fire.\n  // To do this reliably, we convert the element back to a button if it is\n  // disabled. We do this so we can use the native button element's disabled\n  // state to prevent clicks.\n  // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n  const derivedAs = disabled || !as ? \"button\" : as;\n\n  const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n    const childrenArray = React.Children.toArray(children);\n    if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n      const child = childrenArray[0] as\n        | React.ReactComponentElement<typeof Icon>\n        | {\n            props: {\n              icon: undefined;\n            };\n          };\n      if (child?.props?.icon) {\n        return \"icon-only\";\n      }\n    }\n    return \"default\";\n  }, [children]);\n\n  return (\n    <ButtonContext.Provider\n      value={{ variant, size, color, state, layout, active }}\n    >\n      <Stack\n        as={derivedAs}\n        className={clsx(\"tgph-button\", className)}\n        display=\"inline-flex\"\n        align=\"center\"\n        justify=\"center\"\n        {...BUTTON_SIZE_MAP[layout][size]}\n        style={styleProp}\n        data-tgph-button\n        data-tgph-button-layout={layout}\n        data-tgph-button-state={state}\n        data-tgph-button-variant={variant}\n        data-tgph-button-color={color}\n        disabled={state === \"disabled\" || state === \"loading\"}\n        {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n        {...otherProps}\n        {...props}\n      >\n        {state === \"loading\" && (\n          <Spinner\n            size={ICON_SIZE_MAP[size]}\n            color={ICON_COLOR_MAP[variant][color]}\n            variant={ICON_VARIANT_MAP[layout]}\n            data-tgph-button-loading-icon\n          />\n        )}\n        {children}\n      </Stack>\n    </ButtonContext.Provider>\n  );\n};\n\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n> & {\n  internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\n  size,\n  color,\n  variant,\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  internal_iconType,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(ButtonContext);\n\n  const iconProps = {\n    size: size ?? ICON_SIZE_MAP[context.size],\n    color:\n      color ??\n      ICON_COLOR_MAP[context.variant][\n        context.state === \"disabled\" ? \"disabled\" : context.color\n      ],\n    variant: variant ?? ICON_VARIANT_MAP[context.layout],\n  };\n\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n  // If the button is set to loading and this icon is identified as leading,\n  // we don't want to render this icon and instead the loading icon which\n  // is managed in the root component. We choose to render the loading icon\n  // in the root component so that it displays when there is no icon already\n  // inside of the button.\n  if (context.state === \"loading\" && internal_iconType === \"leading\") {\n    return null;\n  }\n\n  return (\n    <TelegraphIcon\n      icon={icon}\n      data-button-icon\n      data-button-icon-color={iconProps.color}\n      {...a11yProps}\n      {...iconProps}\n      {...props}\n    />\n  );\n};\n\ntype TextProps<T extends TgphElement> = RemappedOmit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as,\n  color,\n  size,\n  weight = \"medium\",\n  style,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(ButtonContext);\n  const derivedColor =\n    color ??\n    TEXT_COLOR_MAP[context.variant][\n      context.state === \"disabled\" ? \"disabled\" : context.color\n    ];\n  return (\n    <TelegraphText\n      as={(as || \"span\") as T}\n      color={derivedColor}\n      size={size ?? TEXT_SIZE_MAP[context.size]}\n      weight={weight}\n      internal_optionalAs={true}\n      data-button-text\n      data-button-text-color={derivedColor}\n      style={{\n        textDecoration: \"none\",\n        whiteSpace: \"nowrap\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n  | {\n      leadingIcon?: DefaultIconProps;\n      trailingIcon?: DefaultIconProps;\n      icon?: never;\n    }\n  | {\n      icon?: DefaultIconProps;\n      leadingIcon?: never;\n      trailingIcon?: never;\n    };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> &\n  BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\n  leadingIcon,\n  trailingIcon,\n  icon,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  const combinedLeadingIcon = leadingIcon || icon;\n  return (\n    <Root {...props}>\n      {combinedLeadingIcon && (\n        <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n      )}\n      {children && <Text>{children}</Text>}\n      {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Icon,\n  Text,\n});\n\nconst Button = Default as typeof Default & {\n  Root: typeof Root;\n  Icon: typeof Icon;\n  Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import { jsxs as w, jsx as d } from "react/jsx-runtime";
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
 import { useDeterminateState as P } from "@telegraph/helpers";
 import { Icon as R, Spinner as B } from "@telegraph/icon";
 import { Stack as L } from "@telegraph/layout";
@@ -147,7 +147,9 @@ const z = {
   outline: {
     default: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "gray-2",
+      active_backgroundColor: "gray-3",
       default_buttonShadowColor: "gray-6",
       hover_buttonShadowColor: "gray-7",
       focus_buttonShadowColor: "gray-8",
@@ -156,7 +158,9 @@ const z = {
     },
     gray: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "gray-2",
+      active_backgroundColor: "gray-3",
       default_buttonShadowColor: "gray-6",
       hover_buttonShadowColor: "gray-7",
       focus_buttonShadowColor: "gray-8",
@@ -165,7 +169,9 @@ const z = {
     },
     red: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "red-2",
+      active_backgroundColor: "red-3",
       default_buttonShadowColor: "red-6",
       hover_buttonShadowColor: "red-7",
       focus_buttonShadowColor: "red-8",
@@ -174,7 +180,9 @@ const z = {
     },
     accent: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "accent-2",
+      active_backgroundColor: "accent-3",
       default_buttonShadowColor: "accent-6",
       hover_buttonShadowColor: "accent-7",
       focus_buttonShadowColor: "accent-8",
@@ -183,7 +191,9 @@ const z = {
     },
     green: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "green-2",
+      active_backgroundColor: "green-3",
       default_buttonShadowColor: "green-6",
       hover_buttonShadowColor: "green-7",
       focus_buttonShadowColor: "green-8",
@@ -192,7 +202,9 @@ const z = {
     },
     blue: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "blue-2",
+      active_backgroundColor: "blue-3",
       default_buttonShadowColor: "blue-6",
       hover_buttonShadowColor: "blue-7",
       focus_buttonShadowColor: "blue-8",
@@ -201,7 +213,9 @@ const z = {
     },
     yellow: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "yellow-2",
+      active_backgroundColor: "yellow-3",
       default_buttonShadowColor: "yellow-6",
       hover_buttonShadowColor: "yellow-7",
       focus_buttonShadowColor: "yellow-8",
@@ -210,7 +224,9 @@ const z = {
     },
     purple: {
       backgroundColor: "surface-1",
+      focus_backgroundColor: "surface-1",
       hover_backgroundColor: "purple-2",
+      active_backgroundColor: "purple-3",
       default_buttonShadowColor: "purple-6",
       hover_buttonShadowColor: "purple-7",
       focus_buttonShadowColor: "purple-8",
@@ -387,7 +403,7 @@ const z = {
     purple: "purple",
     disabled: "disabled"
   }
-}, f = {
+}, w = {
   0: "0",
   1: "1",
   2: "2",
@@ -454,11 +470,11 @@ const z = {
   color: e = "default",
   state: l = "default",
   active: a = !1,
-  type: n = "button",
+  type: u = "button",
   disabled: c,
-  className: u,
+  className: n,
   children: g,
-  style: _,
+  style: i,
   ...T
 }) => {
   const V = $({ state: l, disabled: c, active: a }), C = P({
@@ -468,15 +484,15 @@ const z = {
   }), { styleProp: E, otherProps: O } = M({
     props: {
       ...D[r][e],
-      style: _
+      style: i
     },
     cssVars: z
-  }), k = c || !o ? "button" : o, h = b.useMemo(() => {
+  }), k = c || !o ? "button" : o, _ = b.useMemo(() => {
     var y;
     const s = b.Children.toArray(g);
     if ((s == null ? void 0 : s.length) === 1 && b.isValidElement(s[0])) {
-      const i = s[0];
-      if ((y = i == null ? void 0 : i.props) != null && y.icon)
+      const h = s[0];
+      if ((y = h == null ? void 0 : h.props) != null && y.icon)
         return "icon-only";
     }
     return "default";
@@ -484,33 +500,33 @@ const z = {
   return /* @__PURE__ */ d(
     v.Provider,
     {
-      value: { variant: r, size: t, color: e, state: C, layout: h, active: a },
-      children: /* @__PURE__ */ w(
+      value: { variant: r, size: t, color: e, state: C, layout: _, active: a },
+      children: /* @__PURE__ */ f(
         L,
         {
           as: k,
-          className: j("tgph-button", u),
+          className: j("tgph-button", n),
           display: "inline-flex",
           align: "center",
           justify: "center",
-          ...Z[h][t],
+          ...Z[_][t],
           style: E,
           "data-tgph-button": !0,
-          "data-tgph-button-layout": h,
+          "data-tgph-button-layout": _,
           "data-tgph-button-state": C,
           "data-tgph-button-variant": r,
           "data-tgph-button-color": e,
           disabled: C === "disabled" || C === "loading",
-          ...k === "button" && { type: n },
+          ...k === "button" && { type: u },
           ...O,
           ...T,
           children: [
             C === "loading" && /* @__PURE__ */ d(
               B,
               {
-                size: f[t],
+                size: w[t],
                 color: x[r][e],
-                variant: S[h],
+                variant: S[_],
                 "data-tgph-button-loading-icon": !0
               }
             ),
@@ -527,21 +543,21 @@ const z = {
   icon: e,
   alt: l,
   "aria-hidden": a,
-  internal_iconType: n,
+  internal_iconType: u,
   ...c
 }) => {
-  const u = b.useContext(v), g = {
-    size: o ?? f[u.size],
-    color: r ?? x[u.variant][u.state === "disabled" ? "disabled" : u.color],
-    variant: t ?? S[u.layout]
-  }, _ = l ? { alt: l } : { "aria-hidden": a };
-  return u.state === "loading" && n === "leading" ? null : /* @__PURE__ */ d(
+  const n = b.useContext(v), g = {
+    size: o ?? w[n.size],
+    color: r ?? x[n.variant][n.state === "disabled" ? "disabled" : n.color],
+    variant: t ?? S[n.layout]
+  }, i = l ? { alt: l } : { "aria-hidden": a };
+  return n.state === "loading" && u === "leading" ? null : /* @__PURE__ */ d(
     R,
     {
       icon: e,
       "data-button-icon": !0,
       "data-button-icon-color": g.color,
-      ..._,
+      ...i,
       ...g,
       ...c
     }
@@ -554,13 +570,13 @@ const z = {
   style: l,
   ...a
 }) => {
-  const n = b.useContext(v), c = r ?? X[n.variant][n.state === "disabled" ? "disabled" : n.color];
+  const u = b.useContext(v), c = r ?? X[u.variant][u.state === "disabled" ? "disabled" : u.color];
   return /* @__PURE__ */ d(
     N,
     {
       as: o || "span",
       color: c,
-      size: t ?? U[n.size],
+      size: t ?? U[u.size],
       weight: e,
       internal_optionalAs: !0,
       "data-button-text": !0,
@@ -581,7 +597,7 @@ const z = {
   ...l
 }) => {
   const a = o || t;
-  return /* @__PURE__ */ w(m, { ...l, children: [
+  return /* @__PURE__ */ f(m, { ...l, children: [
     a && /* @__PURE__ */ d(p, { ...a, internal_iconType: "leading" }),
     e && /* @__PURE__ */ d(A, { children: e }),
     r && /* @__PURE__ */ d(p, { ...r, internal_iconType: "trailing" })

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n  default_buttonShadowColor: keyof typeof tokens.color;\n  hover_buttonShadowColor: keyof typeof tokens.color;\n  focus_buttonShadowColor: keyof typeof tokens.color;\n  active_buttonShadowColor: keyof typeof tokens.color;\n  hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n  default_buttonShadowColor: {\n    cssVar: \"--box-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_buttonShadowColor: {\n    cssVar: \"--tgph-button-hover-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  focus_buttonShadowColor: {\n    cssVar: \"--tgph-button-focus-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  active_buttonShadowColor: {\n    cssVar: \"--tgph-button-active-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_textColor: {\n    cssVar: \"--tgph-button-hover-text-color\",\n    value: \"var(--tgph-VARIABLE)\",\n  },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n  solid: {\n    default: {\n      backgroundColor: \"gray-12\",\n      hover_backgroundColor: \"gray-11\",\n      focus_backgroundColor: \"gray-10\",\n      active_backgroundColor: \"gray-10\",\n      hover_textColor: \"white\",\n    },\n    accent: {\n      backgroundColor: \"accent-9\",\n      hover_backgroundColor: \"accent-10\",\n      focus_backgroundColor: \"accent-11\",\n      active_backgroundColor: \"accent-11\",\n      hover_textColor: \"white\",\n    },\n    red: {\n      backgroundColor: \"red-9\",\n      hover_backgroundColor: \"red-10\",\n      focus_backgroundColor: \"red-11\",\n      active_backgroundColor: \"red-11\",\n      hover_textColor: \"white\",\n    },\n    gray: {\n      backgroundColor: \"gray-9\",\n      hover_backgroundColor: \"gray-10\",\n      focus_backgroundColor: \"gray-11\",\n      active_backgroundColor: \"gray-11\",\n      hover_textColor: \"white\",\n    },\n    green: {\n      backgroundColor: \"green-9\",\n      hover_backgroundColor: \"green-10\",\n      focus_backgroundColor: \"green-11\",\n      active_backgroundColor: \"green-11\",\n      hover_textColor: \"white\",\n    },\n    blue: {\n      backgroundColor: \"blue-9\",\n      hover_backgroundColor: \"blue-10\",\n      focus_backgroundColor: \"blue-11\",\n      active_backgroundColor: \"blue-11\",\n      hover_textColor: \"white\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-9\",\n      hover_backgroundColor: \"yellow-10\",\n      focus_backgroundColor: \"yellow-11\",\n      active_backgroundColor: \"yellow-11\",\n      hover_textColor: \"white\",\n    },\n    purple: {\n      backgroundColor: \"purple-9\",\n      hover_backgroundColor: \"purple-10\",\n      focus_backgroundColor: \"purple-11\",\n      active_backgroundColor: \"purple-11\",\n      hover_textColor: \"white\",\n    },\n  },\n  soft: {\n    default: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"red-3\",\n      hover_backgroundColor: \"red-4\",\n      focus_backgroundColor: \"red-5\",\n      active_backgroundColor: \"red-5\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"accent-3\",\n      hover_backgroundColor: \"accent-4\",\n      focus_backgroundColor: \"accent-5\",\n      active_backgroundColor: \"accent-5\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"green-3\",\n      hover_backgroundColor: \"green-4\",\n      focus_backgroundColor: \"green-5\",\n      active_backgroundColor: \"green-5\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"blue-3\",\n      hover_backgroundColor: \"blue-4\",\n      focus_backgroundColor: \"blue-5\",\n      active_backgroundColor: \"blue-5\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-3\",\n      hover_backgroundColor: \"yellow-4\",\n      focus_backgroundColor: \"yellow-5\",\n      active_backgroundColor: \"yellow-5\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"purple-3\",\n      hover_backgroundColor: \"purple-4\",\n      focus_backgroundColor: \"purple-5\",\n      active_backgroundColor: \"purple-5\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  outline: {\n    default: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"red-2\",\n      default_buttonShadowColor: \"red-6\",\n      hover_buttonShadowColor: \"red-7\",\n      focus_buttonShadowColor: \"red-8\",\n      active_buttonShadowColor: \"red-8\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"accent-2\",\n      default_buttonShadowColor: \"accent-6\",\n      hover_buttonShadowColor: \"accent-7\",\n      focus_buttonShadowColor: \"accent-8\",\n      active_buttonShadowColor: \"accent-8\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"green-2\",\n      default_buttonShadowColor: \"green-6\",\n      hover_buttonShadowColor: \"green-7\",\n      focus_buttonShadowColor: \"green-8\",\n      active_buttonShadowColor: \"green-8\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"blue-2\",\n      default_buttonShadowColor: \"blue-6\",\n      hover_buttonShadowColor: \"blue-7\",\n      focus_buttonShadowColor: \"blue-8\",\n      active_buttonShadowColor: \"blue-8\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"yellow-2\",\n      default_buttonShadowColor: \"yellow-6\",\n      hover_buttonShadowColor: \"yellow-7\",\n      focus_buttonShadowColor: \"yellow-8\",\n      active_buttonShadowColor: \"yellow-8\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"purple-2\",\n      default_buttonShadowColor: \"purple-6\",\n      hover_buttonShadowColor: \"purple-7\",\n      focus_buttonShadowColor: \"purple-8\",\n      active_buttonShadowColor: \"purple-8\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  ghost: {\n    default: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"red-3\",\n      focus_backgroundColor: \"red-4\",\n      active_backgroundColor: \"red-4\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"accent-3\",\n      focus_backgroundColor: \"accent-4\",\n      active_backgroundColor: \"accent-4\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"green-3\",\n      focus_backgroundColor: \"green-4\",\n      active_backgroundColor: \"green-4\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"blue-3\",\n      focus_backgroundColor: \"blue-4\",\n      active_backgroundColor: \"blue-4\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"yellow-3\",\n      focus_backgroundColor: \"yellow-4\",\n      active_backgroundColor: \"yellow-4\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"purple-3\",\n      focus_backgroundColor: \"purple-4\",\n      active_backgroundColor: \"purple-4\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n  default: {\n    \"0\": {\n      w: \"auto\",\n      h: \"5\",\n      gap: \"0_5\",\n      px: \"1\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"auto\",\n      h: \"6\",\n      gap: \"1\",\n      px: \"1_5\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"auto\",\n      h: \"8\",\n      gap: \"1_5\",\n      px: \"2\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"auto\",\n      h: \"10\",\n      gap: \"2\",\n      px: \"3\",\n      rounded: \"3\",\n    },\n  },\n  \"icon-only\": {\n    \"0\": {\n      w: \"5\",\n      h: \"5\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"6\",\n      h: \"6\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"8\",\n      h: \"8\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"10\",\n      h: \"10\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"3\",\n    },\n  },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"gray\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n  default: \"secondary\",\n  \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n  type PolymorphicProps,\n  type PolymorphicPropsWithTgphRef,\n  RemappedOmit,\n  type Required,\n  type TgphComponentProps,\n  type TgphElement,\n  useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n  BUTTON_COLOR_MAP,\n  BUTTON_SIZE_MAP,\n  type ButtonColor,\n  type ButtonSize,\n  type ButtonVariant,\n  ICON_COLOR_MAP,\n  ICON_SIZE_MAP,\n  ICON_VARIANT_MAP,\n  TEXT_COLOR_MAP,\n  TEXT_SIZE_MAP,\n  cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  state?: \"default\" | \"loading\";\n  active?: boolean;\n};\n\ntype InternalProps = {\n  layout: \"default\" | \"icon-only\";\n  color: Required<RootBaseProps>[\"color\"];\n  state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof Stack>,\n  \"tgphRef\"\n> &\n  PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n  RootBaseProps;\n\nconst ButtonContext = React.createContext<\n  Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n  variant: \"solid\",\n  size: \"2\",\n  color: \"default\",\n  state: \"default\",\n  layout: \"default\",\n  active: false,\n});\n\ntype DeriveStateParams = {\n  state: Required<RootBaseProps>[\"state\"];\n  disabled?: boolean;\n  active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n  if (params.disabled) return \"disabled\";\n  if (params.state === \"loading\") return \"loading\";\n  if (params.active) return \"active\";\n  return params.state;\n};\n\nconst Root = <T extends TgphElement>({\n  as,\n  variant = \"solid\",\n  size = \"2\",\n  color = \"default\",\n  state: stateProp = \"default\",\n  active = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  style,\n  ...props\n}: RootProps<T>) => {\n  const derivedState = deriveState({ state: stateProp, disabled, active });\n  const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n    value: derivedState,\n    determinateValue: \"loading\",\n    minDurationMs: 1200,\n  });\n\n  const { styleProp, otherProps } = useStyleEngine({\n    props: {\n      ...BUTTON_COLOR_MAP[variant][color],\n      style,\n    },\n    cssVars,\n  });\n\n  // If the button is in a disabled state, we don't want any clicks to fire.\n  // To do this reliably, we convert the element back to a button if it is\n  // disabled. We do this so we can use the native button element's disabled\n  // state to prevent clicks.\n  // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n  const derivedAs = disabled || !as ? \"button\" : as;\n\n  const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n    const childrenArray = React.Children.toArray(children);\n    if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n      const child = childrenArray[0] as\n        | React.ReactComponentElement<typeof Icon>\n        | {\n            props: {\n              icon: undefined;\n            };\n          };\n      if (child?.props?.icon) {\n        return \"icon-only\";\n      }\n    }\n    return \"default\";\n  }, [children]);\n\n  return (\n    <ButtonContext.Provider\n      value={{ variant, size, color, state, layout, active }}\n    >\n      <Stack\n        as={derivedAs}\n        className={clsx(\"tgph-button\", className)}\n        display=\"inline-flex\"\n        align=\"center\"\n        justify=\"center\"\n        {...BUTTON_SIZE_MAP[layout][size]}\n        style={styleProp}\n        data-tgph-button\n        data-tgph-button-layout={layout}\n        data-tgph-button-state={state}\n        data-tgph-button-variant={variant}\n        data-tgph-button-color={color}\n        disabled={state === \"disabled\" || state === \"loading\"}\n        {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n        {...otherProps}\n        {...props}\n      >\n        {state === \"loading\" && (\n          <Spinner\n            size={ICON_SIZE_MAP[size]}\n            color={ICON_COLOR_MAP[variant][color]}\n            variant={ICON_VARIANT_MAP[layout]}\n            data-tgph-button-loading-icon\n          />\n        )}\n        {children}\n      </Stack>\n    </ButtonContext.Provider>\n  );\n};\n\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n> & {\n  internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\n  size,\n  color,\n  variant,\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  internal_iconType,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(ButtonContext);\n\n  const iconProps = {\n    size: size ?? ICON_SIZE_MAP[context.size],\n    color:\n      color ??\n      ICON_COLOR_MAP[context.variant][\n        context.state === \"disabled\" ? \"disabled\" : context.color\n      ],\n    variant: variant ?? ICON_VARIANT_MAP[context.layout],\n  };\n\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n  // If the button is set to loading and this icon is identified as leading,\n  // we don't want to render this icon and instead the loading icon which\n  // is managed in the root component. We choose to render the loading icon\n  // in the root component so that it displays when there is no icon already\n  // inside of the button.\n  if (context.state === \"loading\" && internal_iconType === \"leading\") {\n    return null;\n  }\n\n  return (\n    <TelegraphIcon\n      icon={icon}\n      data-button-icon\n      data-button-icon-color={iconProps.color}\n      {...a11yProps}\n      {...iconProps}\n      {...props}\n    />\n  );\n};\n\ntype TextProps<T extends TgphElement> = RemappedOmit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as,\n  color,\n  size,\n  weight = \"medium\",\n  style,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(ButtonContext);\n  const derivedColor =\n    color ??\n    TEXT_COLOR_MAP[context.variant][\n      context.state === \"disabled\" ? \"disabled\" : context.color\n    ];\n  return (\n    <TelegraphText\n      as={(as || \"span\") as T}\n      color={derivedColor}\n      size={size ?? TEXT_SIZE_MAP[context.size]}\n      weight={weight}\n      internal_optionalAs={true}\n      data-button-text\n      data-button-text-color={derivedColor}\n      style={{\n        textDecoration: \"none\",\n        whiteSpace: \"nowrap\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n  | {\n      leadingIcon?: DefaultIconProps;\n      trailingIcon?: DefaultIconProps;\n      icon?: never;\n    }\n  | {\n      icon?: DefaultIconProps;\n      leadingIcon?: never;\n      trailingIcon?: never;\n    };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> &\n  BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\n  leadingIcon,\n  trailingIcon,\n  icon,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  const combinedLeadingIcon = leadingIcon || icon;\n  return (\n    <Root {...props}>\n      {combinedLeadingIcon && (\n        <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n      )}\n      {children && <Text>{children}</Text>}\n      {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Icon,\n  Text,\n});\n\nconst Button = Default as typeof Default & {\n  Root: typeof Root;\n  Icon: typeof Icon;\n  Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n  default_buttonShadowColor: keyof typeof tokens.color;\n  hover_buttonShadowColor: keyof typeof tokens.color;\n  focus_buttonShadowColor: keyof typeof tokens.color;\n  active_buttonShadowColor: keyof typeof tokens.color;\n  hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n  default_buttonShadowColor: {\n    cssVar: \"--box-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_buttonShadowColor: {\n    cssVar: \"--tgph-button-hover-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  focus_buttonShadowColor: {\n    cssVar: \"--tgph-button-focus-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  active_buttonShadowColor: {\n    cssVar: \"--tgph-button-active-shadow\",\n    value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n  },\n  hover_textColor: {\n    cssVar: \"--tgph-button-hover-text-color\",\n    value: \"var(--tgph-VARIABLE)\",\n  },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n  solid: {\n    default: {\n      backgroundColor: \"gray-12\",\n      hover_backgroundColor: \"gray-11\",\n      focus_backgroundColor: \"gray-10\",\n      active_backgroundColor: \"gray-10\",\n      hover_textColor: \"white\",\n    },\n    accent: {\n      backgroundColor: \"accent-9\",\n      hover_backgroundColor: \"accent-10\",\n      focus_backgroundColor: \"accent-11\",\n      active_backgroundColor: \"accent-11\",\n      hover_textColor: \"white\",\n    },\n    red: {\n      backgroundColor: \"red-9\",\n      hover_backgroundColor: \"red-10\",\n      focus_backgroundColor: \"red-11\",\n      active_backgroundColor: \"red-11\",\n      hover_textColor: \"white\",\n    },\n    gray: {\n      backgroundColor: \"gray-9\",\n      hover_backgroundColor: \"gray-10\",\n      focus_backgroundColor: \"gray-11\",\n      active_backgroundColor: \"gray-11\",\n      hover_textColor: \"white\",\n    },\n    green: {\n      backgroundColor: \"green-9\",\n      hover_backgroundColor: \"green-10\",\n      focus_backgroundColor: \"green-11\",\n      active_backgroundColor: \"green-11\",\n      hover_textColor: \"white\",\n    },\n    blue: {\n      backgroundColor: \"blue-9\",\n      hover_backgroundColor: \"blue-10\",\n      focus_backgroundColor: \"blue-11\",\n      active_backgroundColor: \"blue-11\",\n      hover_textColor: \"white\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-9\",\n      hover_backgroundColor: \"yellow-10\",\n      focus_backgroundColor: \"yellow-11\",\n      active_backgroundColor: \"yellow-11\",\n      hover_textColor: \"white\",\n    },\n    purple: {\n      backgroundColor: \"purple-9\",\n      hover_backgroundColor: \"purple-10\",\n      focus_backgroundColor: \"purple-11\",\n      active_backgroundColor: \"purple-11\",\n      hover_textColor: \"white\",\n    },\n  },\n  soft: {\n    default: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"red-3\",\n      hover_backgroundColor: \"red-4\",\n      focus_backgroundColor: \"red-5\",\n      active_backgroundColor: \"red-5\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"accent-3\",\n      hover_backgroundColor: \"accent-4\",\n      focus_backgroundColor: \"accent-5\",\n      active_backgroundColor: \"accent-5\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"green-3\",\n      hover_backgroundColor: \"green-4\",\n      focus_backgroundColor: \"green-5\",\n      active_backgroundColor: \"green-5\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"blue-3\",\n      hover_backgroundColor: \"blue-4\",\n      focus_backgroundColor: \"blue-5\",\n      active_backgroundColor: \"blue-5\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-3\",\n      hover_backgroundColor: \"yellow-4\",\n      focus_backgroundColor: \"yellow-5\",\n      active_backgroundColor: \"yellow-5\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"purple-3\",\n      hover_backgroundColor: \"purple-4\",\n      focus_backgroundColor: \"purple-5\",\n      active_backgroundColor: \"purple-5\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  outline: {\n    default: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      active_backgroundColor: \"gray-3\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n      active_backgroundColor: \"gray-3\",\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"red-2\",\n      active_backgroundColor: \"red-3\",\n      default_buttonShadowColor: \"red-6\",\n      hover_buttonShadowColor: \"red-7\",\n      focus_buttonShadowColor: \"red-8\",\n      active_buttonShadowColor: \"red-8\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"accent-2\",\n      active_backgroundColor: \"accent-3\",\n      default_buttonShadowColor: \"accent-6\",\n      hover_buttonShadowColor: \"accent-7\",\n      focus_buttonShadowColor: \"accent-8\",\n      active_buttonShadowColor: \"accent-8\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"green-2\",\n      active_backgroundColor: \"green-3\",\n      default_buttonShadowColor: \"green-6\",\n      hover_buttonShadowColor: \"green-7\",\n      focus_buttonShadowColor: \"green-8\",\n      active_buttonShadowColor: \"green-8\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"blue-2\",\n      active_backgroundColor: \"blue-3\",\n      default_buttonShadowColor: \"blue-6\",\n      hover_buttonShadowColor: \"blue-7\",\n      focus_buttonShadowColor: \"blue-8\",\n      active_buttonShadowColor: \"blue-8\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"yellow-2\",\n      active_backgroundColor: \"yellow-3\",\n      default_buttonShadowColor: \"yellow-6\",\n      hover_buttonShadowColor: \"yellow-7\",\n      focus_buttonShadowColor: \"yellow-8\",\n      active_buttonShadowColor: \"yellow-8\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"surface-1\",\n      focus_backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"purple-2\",\n      active_backgroundColor: \"purple-3\",\n      default_buttonShadowColor: \"purple-6\",\n      hover_buttonShadowColor: \"purple-7\",\n      focus_buttonShadowColor: \"purple-8\",\n      active_buttonShadowColor: \"purple-8\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n  ghost: {\n    default: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    gray: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"gray-3\",\n      focus_backgroundColor: \"gray-4\",\n      active_backgroundColor: \"gray-4\",\n      hover_textColor: \"gray-12\",\n    },\n    red: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"red-3\",\n      focus_backgroundColor: \"red-4\",\n      active_backgroundColor: \"red-4\",\n      hover_textColor: \"red-11\",\n    },\n    accent: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"accent-3\",\n      focus_backgroundColor: \"accent-4\",\n      active_backgroundColor: \"accent-4\",\n      hover_textColor: \"accent-11\",\n    },\n    green: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"green-3\",\n      focus_backgroundColor: \"green-4\",\n      active_backgroundColor: \"green-4\",\n      hover_textColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"blue-3\",\n      focus_backgroundColor: \"blue-4\",\n      active_backgroundColor: \"blue-4\",\n      hover_textColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"yellow-3\",\n      focus_backgroundColor: \"yellow-4\",\n      active_backgroundColor: \"yellow-4\",\n      hover_textColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"purple-3\",\n      focus_backgroundColor: \"purple-4\",\n      active_backgroundColor: \"purple-4\",\n      hover_textColor: \"purple-11\",\n    },\n  },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n  default: {\n    \"0\": {\n      w: \"auto\",\n      h: \"5\",\n      gap: \"0_5\",\n      px: \"1\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"auto\",\n      h: \"6\",\n      gap: \"1\",\n      px: \"1_5\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"auto\",\n      h: \"8\",\n      gap: \"1_5\",\n      px: \"2\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"auto\",\n      h: \"10\",\n      gap: \"2\",\n      px: \"3\",\n      rounded: \"3\",\n    },\n  },\n  \"icon-only\": {\n    \"0\": {\n      w: \"5\",\n      h: \"5\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"1\": {\n      w: \"6\",\n      h: \"6\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      w: \"8\",\n      h: \"8\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      w: \"10\",\n      h: \"10\",\n      gap: \"0\",\n      px: \"0\",\n      rounded: \"3\",\n    },\n  },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"default\",\n    gray: \"gray\",\n    red: \"red\",\n    accent: \"accent\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n  \"0\": \"0\",\n  \"1\": \"1\",\n  \"2\": \"2\",\n  \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n  solid: {\n    default: \"white\",\n    gray: \"white\",\n    red: \"white\",\n    accent: \"white\",\n    green: \"white\",\n    blue: \"white\",\n    yellow: \"white\",\n    purple: \"white\",\n    disabled: \"disabled\",\n  },\n  soft: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  outline: {\n    default: \"default\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n  ghost: {\n    default: \"gray\",\n    accent: \"accent\",\n    gray: \"gray\",\n    red: \"red\",\n    green: \"green\",\n    blue: \"blue\",\n    yellow: \"yellow\",\n    purple: \"purple\",\n    disabled: \"disabled\",\n  },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n  default: \"secondary\",\n  \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n  type PolymorphicProps,\n  type PolymorphicPropsWithTgphRef,\n  RemappedOmit,\n  type Required,\n  type TgphComponentProps,\n  type TgphElement,\n  useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n  BUTTON_COLOR_MAP,\n  BUTTON_SIZE_MAP,\n  type ButtonColor,\n  type ButtonSize,\n  type ButtonVariant,\n  ICON_COLOR_MAP,\n  ICON_SIZE_MAP,\n  ICON_VARIANT_MAP,\n  TEXT_COLOR_MAP,\n  TEXT_SIZE_MAP,\n  cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  state?: \"default\" | \"loading\";\n  active?: boolean;\n};\n\ntype InternalProps = {\n  layout: \"default\" | \"icon-only\";\n  color: Required<RootBaseProps>[\"color\"];\n  state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof Stack>,\n  \"tgphRef\"\n> &\n  PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n  RootBaseProps;\n\nconst ButtonContext = React.createContext<\n  Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n  variant: \"solid\",\n  size: \"2\",\n  color: \"default\",\n  state: \"default\",\n  layout: \"default\",\n  active: false,\n});\n\ntype DeriveStateParams = {\n  state: Required<RootBaseProps>[\"state\"];\n  disabled?: boolean;\n  active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n  if (params.disabled) return \"disabled\";\n  if (params.state === \"loading\") return \"loading\";\n  if (params.active) return \"active\";\n  return params.state;\n};\n\nconst Root = <T extends TgphElement>({\n  as,\n  variant = \"solid\",\n  size = \"2\",\n  color = \"default\",\n  state: stateProp = \"default\",\n  active = false,\n  type = \"button\",\n  disabled,\n  className,\n  children,\n  style,\n  ...props\n}: RootProps<T>) => {\n  const derivedState = deriveState({ state: stateProp, disabled, active });\n  const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n    value: derivedState,\n    determinateValue: \"loading\",\n    minDurationMs: 1200,\n  });\n\n  const { styleProp, otherProps } = useStyleEngine({\n    props: {\n      ...BUTTON_COLOR_MAP[variant][color],\n      style,\n    },\n    cssVars,\n  });\n\n  // If the button is in a disabled state, we don't want any clicks to fire.\n  // To do this reliably, we convert the element back to a button if it is\n  // disabled. We do this so we can use the native button element's disabled\n  // state to prevent clicks.\n  // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n  const derivedAs = disabled || !as ? \"button\" : as;\n\n  const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n    const childrenArray = React.Children.toArray(children);\n    if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n      const child = childrenArray[0] as\n        | React.ReactComponentElement<typeof Icon>\n        | {\n            props: {\n              icon: undefined;\n            };\n          };\n      if (child?.props?.icon) {\n        return \"icon-only\";\n      }\n    }\n    return \"default\";\n  }, [children]);\n\n  return (\n    <ButtonContext.Provider\n      value={{ variant, size, color, state, layout, active }}\n    >\n      <Stack\n        as={derivedAs}\n        className={clsx(\"tgph-button\", className)}\n        display=\"inline-flex\"\n        align=\"center\"\n        justify=\"center\"\n        {...BUTTON_SIZE_MAP[layout][size]}\n        style={styleProp}\n        data-tgph-button\n        data-tgph-button-layout={layout}\n        data-tgph-button-state={state}\n        data-tgph-button-variant={variant}\n        data-tgph-button-color={color}\n        disabled={state === \"disabled\" || state === \"loading\"}\n        {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n        {...otherProps}\n        {...props}\n      >\n        {state === \"loading\" && (\n          <Spinner\n            size={ICON_SIZE_MAP[size]}\n            color={ICON_COLOR_MAP[variant][color]}\n            variant={ICON_VARIANT_MAP[layout]}\n            data-tgph-button-loading-icon\n          />\n        )}\n        {children}\n      </Stack>\n    </ButtonContext.Provider>\n  );\n};\n\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n> & {\n  internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\n  size,\n  color,\n  variant,\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  internal_iconType,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(ButtonContext);\n\n  const iconProps = {\n    size: size ?? ICON_SIZE_MAP[context.size],\n    color:\n      color ??\n      ICON_COLOR_MAP[context.variant][\n        context.state === \"disabled\" ? \"disabled\" : context.color\n      ],\n    variant: variant ?? ICON_VARIANT_MAP[context.layout],\n  };\n\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n  // If the button is set to loading and this icon is identified as leading,\n  // we don't want to render this icon and instead the loading icon which\n  // is managed in the root component. We choose to render the loading icon\n  // in the root component so that it displays when there is no icon already\n  // inside of the button.\n  if (context.state === \"loading\" && internal_iconType === \"leading\") {\n    return null;\n  }\n\n  return (\n    <TelegraphIcon\n      icon={icon}\n      data-button-icon\n      data-button-icon-color={iconProps.color}\n      {...a11yProps}\n      {...iconProps}\n      {...props}\n    />\n  );\n};\n\ntype TextProps<T extends TgphElement> = RemappedOmit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as,\n  color,\n  size,\n  weight = \"medium\",\n  style,\n  ...props\n}: TextProps<T>) => {\n  const context = React.useContext(ButtonContext);\n  const derivedColor =\n    color ??\n    TEXT_COLOR_MAP[context.variant][\n      context.state === \"disabled\" ? \"disabled\" : context.color\n    ];\n  return (\n    <TelegraphText\n      as={(as || \"span\") as T}\n      color={derivedColor}\n      size={size ?? TEXT_SIZE_MAP[context.size]}\n      weight={weight}\n      internal_optionalAs={true}\n      data-button-text\n      data-button-text-color={derivedColor}\n      style={{\n        textDecoration: \"none\",\n        whiteSpace: \"nowrap\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n  | {\n      leadingIcon?: DefaultIconProps;\n      trailingIcon?: DefaultIconProps;\n      icon?: never;\n    }\n  | {\n      icon?: DefaultIconProps;\n      leadingIcon?: never;\n      trailingIcon?: never;\n    };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> &\n  BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\n  leadingIcon,\n  trailingIcon,\n  icon,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  const combinedLeadingIcon = leadingIcon || icon;\n  return (\n    <Root {...props}>\n      {combinedLeadingIcon && (\n        <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n      )}\n      {children && <Text>{children}</Text>}\n      {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Icon,\n  Text,\n});\n\nconst Button = Default as typeof Default & {\n  Root: typeof Root;\n  Icon: typeof Icon;\n  Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}

package/dist/types/Button/Button.constants.d.ts

@@ -127,7 +127,9 @@ export declare const BUTTON_COLOR_MAP: {
     readonly outline: {
         readonly default: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "gray-2";
+            readonly active_backgroundColor: "gray-3";
             readonly default_buttonShadowColor: "gray-6";
             readonly hover_buttonShadowColor: "gray-7";
             readonly focus_buttonShadowColor: "gray-8";
@@ -136,7 +138,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly gray: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "gray-2";
+            readonly active_backgroundColor: "gray-3";
             readonly default_buttonShadowColor: "gray-6";
             readonly hover_buttonShadowColor: "gray-7";
             readonly focus_buttonShadowColor: "gray-8";
@@ -145,7 +149,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly red: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "red-2";
+            readonly active_backgroundColor: "red-3";
             readonly default_buttonShadowColor: "red-6";
             readonly hover_buttonShadowColor: "red-7";
             readonly focus_buttonShadowColor: "red-8";
@@ -154,7 +160,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly accent: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "accent-2";
+            readonly active_backgroundColor: "accent-3";
             readonly default_buttonShadowColor: "accent-6";
             readonly hover_buttonShadowColor: "accent-7";
             readonly focus_buttonShadowColor: "accent-8";
@@ -163,7 +171,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly green: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "green-2";
+            readonly active_backgroundColor: "green-3";
             readonly default_buttonShadowColor: "green-6";
             readonly hover_buttonShadowColor: "green-7";
             readonly focus_buttonShadowColor: "green-8";
@@ -172,7 +182,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly blue: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "blue-2";
+            readonly active_backgroundColor: "blue-3";
             readonly default_buttonShadowColor: "blue-6";
             readonly hover_buttonShadowColor: "blue-7";
             readonly focus_buttonShadowColor: "blue-8";
@@ -181,7 +193,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly yellow: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "yellow-2";
+            readonly active_backgroundColor: "yellow-3";
             readonly default_buttonShadowColor: "yellow-6";
             readonly hover_buttonShadowColor: "yellow-7";
             readonly focus_buttonShadowColor: "yellow-8";
@@ -190,7 +204,9 @@ export declare const BUTTON_COLOR_MAP: {
         };
         readonly purple: {
             readonly backgroundColor: "surface-1";
+            readonly focus_backgroundColor: "surface-1";
             readonly hover_backgroundColor: "purple-2";
+            readonly active_backgroundColor: "purple-3";
             readonly default_buttonShadowColor: "purple-6";
             readonly hover_buttonShadowColor: "purple-7";
             readonly focus_buttonShadowColor: "purple-8";

package/dist/types/Button/Button.constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.constants.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACrD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,wBAAwB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,cAAc,EAAE,UAAU,CAqBnD,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyPnB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DlB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"Button.constants.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACrD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,wBAAwB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,cAAc,EAAE,UAAU,CAqBnD,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyQnB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DlB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/button",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Button component in Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/button",
   "author": "@knocklabs",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@telegraph/helpers": "^0.0.13",
-    "@telegraph/icon": "^0.3.1",
-    "@telegraph/layout": "^0.3.0",
-    "@telegraph/style-engine": "^0.2.0",
-    "@telegraph/typography": "^0.1.26",
+    "@telegraph/icon": "^0.3.2",
+    "@telegraph/layout": "^0.3.1",
+    "@telegraph/style-engine": "^0.2.1",
+    "@telegraph/typography": "^0.1.27",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0"
   },
@@ -51,7 +51,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "typescript": "^5.9.3",
-    "vite": "^6.0.11"
+    "vite": "^6.4.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",