@telegraph/button 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @telegraph/button
 
+## 0.2.7
+
+### Patch Changes
+
+- [#599](https://github.com/knocklabs/telegraph/pull/599) [`0073505`](https://github.com/knocklabs/telegraph/commit/00735055f9078e61ac4b31d7bc306b57c5fc6c7b) Thanks [@MikeCarbone](https://github.com/MikeCarbone)! - fix: fixes solid variants of button hover colors
+
+## 0.2.6
+
+### Patch Changes
+
+- [#597](https://github.com/knocklabs/telegraph/pull/597) [`17a3409`](https://github.com/knocklabs/telegraph/commit/17a34098ee1c6c83ba9dd7ff65255161f2ff094c) Thanks [@MikeCarbone](https://github.com/MikeCarbone)! - fix: apply hover colors to other button colors
+
 ## 0.2.5
 
 ### Patch Changes

package/dist/cjs/index.js

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

@@ -1 +1 @@
-.tgph-button{--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;--tgph-button-hover-text-color: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none}.tgph-button [data-button-text],.tgph-button [data-button-icon]{transition:color .2s ease-in-out}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:hover [data-button-text],.tgph-button:hover [data-button-icon]{--color: var(--tgph-button-hover-text-color) !important}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+.tgph-button{--tgph-button-hover-shadow: none;--tgph-button-focus-shadow: none;--tgph-button-active-shadow: none;--tgph-button-hover-text-color: none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;box-sizing:border-box;font-family:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out;text-decoration:none}.tgph-button [data-button-text],.tgph-button [data-button-icon]{transition:color .2s ease-in-out}.tgph-button:hover{box-shadow:var(--tgph-button-hover-shadow)}.tgph-button:not([data-tgph-button-state=disabled]):hover [data-button-text]{--color: var(--tgph-button-hover-text-color) !important}.tgph-button:not([data-tgph-button-state=disabled]):hover [data-button-icon]{--color: var(--tgph-button-hover-text-color) !important}.tgph-button:focus{box-shadow:var(--tgph-button-focus-shadow)}.tgph-button[data-tgph-button-state=active]{box-shadow:var(--tgph-button-active-shadow);background-color:var(--active_backgroundColor)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=solid],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=soft],.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=outline]{background-color:var(--tgph-gray-3)}.tgph-button[data-tgph-button-state=disabled][data-tgph-button-variant=ghost]{background-color:var(--tgph-transparent)}.tgph-button:disabled{cursor:not-allowed}.tgph-button[data-tgph-button-state=disabled]:hover{background-color:revert}[data-tgph-button-loading-icon]{animation:button-loading-icon 1s infinite linear}@keyframes button-loading-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/esm/index.mjs

@@ -34,49 +34,57 @@ const M = {
       backgroundColor: "gray-12",
       hover_backgroundColor: "gray-11",
       focus_backgroundColor: "gray-10",
-      active_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"
+      active_backgroundColor: "accent-11",
+      hover_textColor: "white"
     },
     red: {
       backgroundColor: "red-9",
       hover_backgroundColor: "red-10",
       focus_backgroundColor: "red-11",
-      active_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"
+      active_backgroundColor: "gray-11",
+      hover_textColor: "white"
     },
     green: {
       backgroundColor: "green-9",
       hover_backgroundColor: "green-10",
       focus_backgroundColor: "green-11",
-      active_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"
+      active_backgroundColor: "blue-11",
+      hover_textColor: "white"
     },
     yellow: {
       backgroundColor: "yellow-9",
       hover_backgroundColor: "yellow-10",
       focus_backgroundColor: "yellow-11",
-      active_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"
+      active_backgroundColor: "purple-11",
+      hover_textColor: "white"
     }
   },
   soft: {
@@ -84,49 +92,57 @@ const M = {
       backgroundColor: "gray-3",
       hover_backgroundColor: "gray-4",
       focus_backgroundColor: "gray-5",
-      active_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"
+      active_backgroundColor: "gray-5",
+      hover_textColor: "gray-12"
     },
     red: {
       backgroundColor: "red-3",
       hover_backgroundColor: "red-4",
       focus_backgroundColor: "red-5",
-      active_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"
+      active_backgroundColor: "accent-5",
+      hover_textColor: "accent-11"
     },
     green: {
       backgroundColor: "green-3",
       hover_backgroundColor: "green-4",
       focus_backgroundColor: "green-5",
-      active_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"
+      active_backgroundColor: "blue-5",
+      hover_textColor: "blue-11"
     },
     yellow: {
       backgroundColor: "yellow-3",
       hover_backgroundColor: "yellow-4",
       focus_backgroundColor: "yellow-5",
-      active_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"
+      active_backgroundColor: "purple-5",
+      hover_textColor: "purple-11"
     }
   },
   outline: {
@@ -136,7 +152,8 @@ const M = {
       default_buttonShadowColor: "gray-6",
       hover_buttonShadowColor: "gray-7",
       focus_buttonShadowColor: "gray-8",
-      active_buttonShadowColor: "gray-8"
+      active_buttonShadowColor: "gray-8",
+      hover_textColor: "gray-12"
     },
     gray: {
       backgroundColor: "surface-1",
@@ -144,7 +161,8 @@ const M = {
       default_buttonShadowColor: "gray-6",
       hover_buttonShadowColor: "gray-7",
       focus_buttonShadowColor: "gray-8",
-      active_buttonShadowColor: "gray-8"
+      active_buttonShadowColor: "gray-8",
+      hover_textColor: "gray-12"
     },
     red: {
       backgroundColor: "surface-1",
@@ -152,7 +170,8 @@ const M = {
       default_buttonShadowColor: "red-6",
       hover_buttonShadowColor: "red-7",
       focus_buttonShadowColor: "red-8",
-      active_buttonShadowColor: "red-8"
+      active_buttonShadowColor: "red-8",
+      hover_textColor: "red-11"
     },
     accent: {
       backgroundColor: "surface-1",
@@ -160,7 +179,8 @@ const M = {
       default_buttonShadowColor: "accent-6",
       hover_buttonShadowColor: "accent-7",
       focus_buttonShadowColor: "accent-8",
-      active_buttonShadowColor: "accent-8"
+      active_buttonShadowColor: "accent-8",
+      hover_textColor: "accent-11"
     },
     green: {
       backgroundColor: "surface-1",
@@ -168,7 +188,8 @@ const M = {
       default_buttonShadowColor: "green-6",
       hover_buttonShadowColor: "green-7",
       focus_buttonShadowColor: "green-8",
-      active_buttonShadowColor: "green-8"
+      active_buttonShadowColor: "green-8",
+      hover_textColor: "green-11"
     },
     blue: {
       backgroundColor: "surface-1",
@@ -176,7 +197,8 @@ const M = {
       default_buttonShadowColor: "blue-6",
       hover_buttonShadowColor: "blue-7",
       focus_buttonShadowColor: "blue-8",
-      active_buttonShadowColor: "blue-8"
+      active_buttonShadowColor: "blue-8",
+      hover_textColor: "blue-11"
     },
     yellow: {
       backgroundColor: "surface-1",
@@ -184,7 +206,8 @@ const M = {
       default_buttonShadowColor: "yellow-6",
       hover_buttonShadowColor: "yellow-7",
       focus_buttonShadowColor: "yellow-8",
-      active_buttonShadowColor: "yellow-8"
+      active_buttonShadowColor: "yellow-8",
+      hover_textColor: "yellow-11"
     },
     purple: {
       backgroundColor: "surface-1",
@@ -192,7 +215,8 @@ const M = {
       default_buttonShadowColor: "purple-6",
       hover_buttonShadowColor: "purple-7",
       focus_buttonShadowColor: "purple-8",
-      active_buttonShadowColor: "purple-8"
+      active_buttonShadowColor: "purple-8",
+      hover_textColor: "purple-11"
     }
   },
   ghost: {
@@ -214,37 +238,43 @@ const M = {
       backgroundColor: "transparent",
       hover_backgroundColor: "red-3",
       focus_backgroundColor: "red-4",
-      active_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"
+      active_backgroundColor: "accent-4",
+      hover_textColor: "accent-11"
     },
     green: {
       backgroundColor: "transparent",
       hover_backgroundColor: "green-3",
       focus_backgroundColor: "green-4",
-      active_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"
+      active_backgroundColor: "blue-4",
+      hover_textColor: "blue-11"
     },
     yellow: {
       backgroundColor: "transparent",
       hover_backgroundColor: "yellow-3",
       focus_backgroundColor: "yellow-4",
-      active_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"
+      active_backgroundColor: "purple-4",
+      hover_textColor: "purple-11"
     }
   }
 }, j = {
@@ -411,7 +441,7 @@ const M = {
 }, X = {
   default: "secondary",
   "icon-only": "primary"
-}, k = b.createContext({
+}, v = b.createContext({
   variant: "solid",
   size: "2",
   color: "default",
@@ -421,63 +451,63 @@ const M = {
 }), $ = (o) => o.disabled ? "disabled" : o.state === "loading" ? "loading" : o.active ? "active" : o.state, f = ({
   as: o,
   variant: r = "solid",
-  size: t = "2",
+  size: a = "2",
   color: e = "default",
   state: l = "default",
-  active: a = !1,
+  active: t = !1,
   type: n = "button",
   disabled: c,
   className: u,
   children: g,
-  style: _,
+  style: i,
   ...m
 }) => {
-  const A = $({ state: l, disabled: c, active: a }), s = V({
+  const A = $({ state: l, disabled: c, active: t }), C = V({
     value: A,
     determinateValue: "loading",
     minDurationMs: 1200
   }), { styleProp: I, otherProps: T } = P({
     props: {
       ...N[r][e],
-      style: _
+      style: i
     },
     cssVars: M
-  }), y = c || !o ? "button" : o, p = b.useMemo(() => {
-    var v;
-    const C = b.Children.toArray(g);
-    if ((C == null ? void 0 : C.length) === 1 && b.isValidElement(C[0])) {
-      const h = C[0];
-      if ((v = h == null ? void 0 : h.props) != null && v.icon)
+  }), 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 p = s[0];
+      if ((y = p == null ? void 0 : p.props) != null && y.icon)
         return "icon-only";
     }
     return "default";
   }, [g]);
   return /* @__PURE__ */ d(
-    k.Provider,
+    v.Provider,
     {
-      value: { variant: r, size: t, color: e, state: s, layout: p, active: a },
+      value: { variant: r, size: a, color: e, state: C, layout: _, active: t },
       children: /* @__PURE__ */ w(
         O,
         {
-          as: y,
+          as: k,
           className: L("tgph-button", u),
           display: "inline-flex",
           align: "center",
           justify: "center",
-          ...j[p][t],
+          ...j[_][a],
           style: I,
           "data-tgph-button": !0,
-          "data-tgph-button-layout": p,
-          "data-tgph-button-state": s,
+          "data-tgph-button-layout": _,
+          "data-tgph-button-state": C,
           "data-tgph-button-variant": r,
           "data-tgph-button-color": e,
-          disabled: s === "disabled" || s === "loading",
-          ...y === "button" && { type: n },
+          disabled: C === "disabled" || C === "loading",
+          ...k === "button" && { type: n },
           ...T,
           ...m,
           children: [
-            s === "loading" && /* @__PURE__ */ d(
-              i,
+            C === "loading" && /* @__PURE__ */ d(
+              h,
               {
                 icon: B,
                 "aria-hidden": !0,
@@ -490,47 +520,47 @@ const M = {
       )
     }
   );
-}, i = ({
+}, h = ({
   size: o,
   color: r,
-  variant: t,
+  variant: a,
   icon: e,
   alt: l,
-  "aria-hidden": a,
+  "aria-hidden": t,
   internal_iconType: n,
   ...c
 }) => {
-  const u = b.useContext(k), g = {
+  const u = b.useContext(v), g = {
     size: o ?? Z[u.size],
     color: r ?? U[u.variant][u.state === "disabled" ? "disabled" : u.color],
-    variant: t ?? X[u.layout]
-  }, _ = l ? { alt: l } : { "aria-hidden": a };
+    variant: a ?? X[u.layout]
+  }, i = l ? { alt: l } : { "aria-hidden": t };
   return u.state === "loading" && n === "leading" ? null : /* @__PURE__ */ d(
     E,
     {
       icon: e,
       "data-button-icon": !0,
       "data-button-icon-color": g.color,
-      ..._,
+      ...i,
       ...g,
       ...c
     }
   );
-}, S = ({
+}, x = ({
   as: o,
   color: r,
-  size: t,
+  size: a,
   weight: e = "medium",
   style: l,
-  ...a
+  ...t
 }) => {
-  const n = b.useContext(k), c = r ?? D[n.variant][n.state === "disabled" ? "disabled" : n.color];
+  const n = b.useContext(v), c = r ?? D[n.variant][n.state === "disabled" ? "disabled" : n.color];
   return /* @__PURE__ */ d(
     R,
     {
       as: o || "span",
       color: c,
-      size: t ?? z[n.size],
+      size: a ?? z[n.size],
       weight: e,
       internal_optionalAs: !0,
       "data-button-text": !0,
@@ -540,29 +570,29 @@ const M = {
         whiteSpace: "nowrap",
         ...l
       },
-      ...a
+      ...t
     }
   );
-}, x = ({
+}, S = ({
   leadingIcon: o,
   trailingIcon: r,
-  icon: t,
+  icon: a,
   children: e,
   ...l
 }) => {
-  const a = o || t;
+  const t = o || a;
   return /* @__PURE__ */ w(f, { ...l, children: [
-    a && /* @__PURE__ */ d(i, { ...a, internal_iconType: "leading" }),
-    e && /* @__PURE__ */ d(S, { children: e }),
-    r && /* @__PURE__ */ d(i, { ...r, internal_iconType: "trailing" })
+    t && /* @__PURE__ */ d(h, { ...t, internal_iconType: "leading" }),
+    e && /* @__PURE__ */ d(x, { children: e }),
+    r && /* @__PURE__ */ d(h, { ...r, internal_iconType: "trailing" })
   ] });
 };
-Object.assign(x, {
+Object.assign(S, {
   Root: f,
-  Icon: i,
-  Text: S
+  Icon: h,
+  Text: x
 });
-const oo = x;
+const oo = S;
 export {
   oo as Button
 };

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    },\n    accent: {\n      backgroundColor: \"accent-9\",\n      hover_backgroundColor: \"accent-10\",\n      focus_backgroundColor: \"accent-11\",\n      active_backgroundColor: \"accent-11\",\n    },\n    red: {\n      backgroundColor: \"red-9\",\n      hover_backgroundColor: \"red-10\",\n      focus_backgroundColor: \"red-11\",\n      active_backgroundColor: \"red-11\",\n    },\n    gray: {\n      backgroundColor: \"gray-9\",\n      hover_backgroundColor: \"gray-10\",\n      focus_backgroundColor: \"gray-11\",\n      active_backgroundColor: \"gray-11\",\n    },\n    green: {\n      backgroundColor: \"green-9\",\n      hover_backgroundColor: \"green-10\",\n      focus_backgroundColor: \"green-11\",\n      active_backgroundColor: \"green-11\",\n    },\n    blue: {\n      backgroundColor: \"blue-9\",\n      hover_backgroundColor: \"blue-10\",\n      focus_backgroundColor: \"blue-11\",\n      active_backgroundColor: \"blue-11\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-9\",\n      hover_backgroundColor: \"yellow-10\",\n      focus_backgroundColor: \"yellow-11\",\n      active_backgroundColor: \"yellow-11\",\n    },\n    purple: {\n      backgroundColor: \"purple-9\",\n      hover_backgroundColor: \"purple-10\",\n      focus_backgroundColor: \"purple-11\",\n      active_backgroundColor: \"purple-11\",\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    },\n    gray: {\n      backgroundColor: \"gray-3\",\n      hover_backgroundColor: \"gray-4\",\n      focus_backgroundColor: \"gray-5\",\n      active_backgroundColor: \"gray-5\",\n    },\n    red: {\n      backgroundColor: \"red-3\",\n      hover_backgroundColor: \"red-4\",\n      focus_backgroundColor: \"red-5\",\n      active_backgroundColor: \"red-5\",\n    },\n    accent: {\n      backgroundColor: \"accent-3\",\n      hover_backgroundColor: \"accent-4\",\n      focus_backgroundColor: \"accent-5\",\n      active_backgroundColor: \"accent-5\",\n    },\n    green: {\n      backgroundColor: \"green-3\",\n      hover_backgroundColor: \"green-4\",\n      focus_backgroundColor: \"green-5\",\n      active_backgroundColor: \"green-5\",\n    },\n    blue: {\n      backgroundColor: \"blue-3\",\n      hover_backgroundColor: \"blue-4\",\n      focus_backgroundColor: \"blue-5\",\n      active_backgroundColor: \"blue-5\",\n    },\n    yellow: {\n      backgroundColor: \"yellow-3\",\n      hover_backgroundColor: \"yellow-4\",\n      focus_backgroundColor: \"yellow-5\",\n      active_backgroundColor: \"yellow-5\",\n    },\n    purple: {\n      backgroundColor: \"purple-3\",\n      hover_backgroundColor: \"purple-4\",\n      focus_backgroundColor: \"purple-5\",\n      active_backgroundColor: \"purple-5\",\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    },\n    gray: {\n      backgroundColor: \"surface-1\",\n      hover_backgroundColor: \"gray-2\",\n\n      default_buttonShadowColor: \"gray-6\",\n      hover_buttonShadowColor: \"gray-7\",\n      focus_buttonShadowColor: \"gray-8\",\n      active_buttonShadowColor: \"gray-8\",\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    },\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    },\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    },\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    },\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    },\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    },\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    },\n    accent: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"accent-3\",\n      focus_backgroundColor: \"accent-4\",\n      active_backgroundColor: \"accent-4\",\n    },\n    green: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"green-3\",\n      focus_backgroundColor: \"green-4\",\n      active_backgroundColor: \"green-4\",\n    },\n    blue: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"blue-3\",\n      focus_backgroundColor: \"blue-4\",\n      active_backgroundColor: \"blue-4\",\n    },\n    yellow: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"yellow-3\",\n      focus_backgroundColor: \"yellow-4\",\n      active_backgroundColor: \"yellow-4\",\n    },\n    purple: {\n      backgroundColor: \"transparent\",\n      hover_backgroundColor: \"purple-3\",\n      focus_backgroundColor: \"purple-4\",\n      active_backgroundColor: \"purple-4\",\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 { 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 { LoaderCircle } from \"lucide-react\";\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          <Icon\n            icon={LoaderCircle}\n            aria-hidden={true}\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","Icon","LoaderCircle","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      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 { 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 { LoaderCircle } from \"lucide-react\";\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          <Icon\n            icon={LoaderCircle}\n            aria-hidden={true}\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","Icon","LoaderCircle","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":";;;;;;;;;AAcO,MAAMA,IAAoD;AAAA,EAC/D,2BAA2B;AAAA,IACzB,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,yBAAyB;AAAA,IACvB,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,yBAAyB;AAAA,IACvB,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,0BAA0B;AAAA,IACxB,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,GAEaC,IAAmB;AAAA,EAC9B,OAAO;AAAA,IACL,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,KAAK;AAAA,MACH,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAEF,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,KAAK;AAAA,MACH,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,KAAK;AAAA,MACH,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,2BAA2B;AAAA,MAC3B,yBAAyB;AAAA,MACzB,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,MAC1B,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAEF,OAAO;AAAA,IACL,SAAS;AAAA,MACP,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,KAAK;AAAA,MACH,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,MAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,iBAAiB;AAAA,MACjB,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,MACvB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,GAEaC,IAAkB;AAAA,EAC7B,SAAS;AAAA,IACP,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,aAAa;AAAA,IACX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,IAEX,GAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAEaC,IAAgB;AAAA,EAC3B,GAAK;AAAA,EACL,GAAK;AAAA,EACL,GAAK;AAAA,EACL,GAAK;AACP,GAEaC,IAAiB;AAAA,EAC5B,OAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ,OAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAEd,GAEaC,IAAgB;AAAA,EAC3B,GAAK;AAAA,EACL,GAAK;AAAA,EACL,GAAK;AAAA,EACL,GAAK;AACP,GAEaC,IAAiB;AAAA,EAC5B,OAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAAA,EAEZ,OAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAEd,GAEaC,IAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,aAAa;AACf,GC1ZMC,IAAgBC,EAAM,cAE1B;AAAA,EACA,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV,CAAC,GASKC,IAAc,CAACC,MACfA,EAAO,WAAiB,aACxBA,EAAO,UAAU,YAAkB,YACnCA,EAAO,SAAe,WACnBA,EAAO,OAGVC,IAAO,CAAwB;AAAA,EACnC,IAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,OAAOC,IAAY;AAAA,EACnB,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAMC,IAAef,EAAY,EAAE,OAAOO,GAAW,UAAAG,GAAU,QAAAF,GAAQ,GACjEQ,IAAQC,EAA8C;AAAA,IAC1D,OAAOF;AAAA,IACP,kBAAkB;AAAA,IAClB,eAAe;AAAA,EAAA,CAChB,GAEK,EAAE,WAAAG,GAAW,YAAAC,EAAA,IAAeC,EAAe;AAAA,IAC/C,OAAO;AAAA,MACL,GAAG7B,EAAiBa,CAAO,EAAEE,CAAK;AAAA,MAClC,OAAAO;AAAA,IAAA;AAAA,IAEF,SAAAvB;AAAA,EAAA,CACD,GAOK+B,IAAYX,KAAY,CAACP,IAAK,WAAWA,GAEzCmB,IAASvB,EAAM,QAAiC,MAAM;;AAC1D,UAAMwB,IAAgBxB,EAAM,SAAS,QAAQa,CAAQ;AACrD,SAAIW,KAAA,gBAAAA,EAAe,YAAW,KAAKxB,EAAM,eAAewB,EAAc,CAAC,CAAC,GAAG;AACzE,YAAMC,IAAQD,EAAc,CAAC;AAO7B,WAAIE,IAAAD,KAAA,gBAAAA,EAAO,UAAP,QAAAC,EAAc;AAChB,eAAO;AAAA,IAEX;AACA,WAAO;AAAA,EACT,GAAG,CAACb,CAAQ,CAAC;AAEb,SACE,gBAAAc;AAAA,IAAC5B,EAAc;AAAA,IAAd;AAAA,MACC,OAAO,EAAE,SAAAM,GAAS,MAAAC,GAAM,OAAAC,GAAO,OAAAU,GAAO,QAAAM,GAAQ,QAAAd,EAAA;AAAA,MAE9C,UAAA,gBAAAmB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,IAAIP;AAAA,UACJ,WAAWQ,EAAK,eAAelB,CAAS;AAAA,UACxC,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,SAAQ;AAAA,UACP,GAAGnB,EAAgB8B,CAAM,EAAEjB,CAAI;AAAA,UAChC,OAAOa;AAAA,UACP,oBAAgB;AAAA,UAChB,2BAAyBI;AAAA,UACzB,0BAAwBN;AAAA,UACxB,4BAA0BZ;AAAA,UAC1B,0BAAwBE;AAAA,UACxB,UAAUU,MAAU,cAAcA,MAAU;AAAA,UAC3C,GAAIK,MAAc,YAAY,EAAE,MAAAZ,EAAA;AAAA,UAChC,GAAGU;AAAA,UACH,GAAGL;AAAA,UAEH,UAAA;AAAA,YAAAE,MAAU,aACT,gBAAAU;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAMC;AAAA,gBACN,eAAa;AAAA,gBACb,iCAA6B;AAAA,cAAA;AAAA,YAAA;AAAA,YAGhCnB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAQMkB,IAAO,CAAwB;AAAA,EACnC,MAAAzB;AAAA,EACA,OAAAC;AAAA,EACA,SAAAF;AAAA,EACA,MAAA4B;AAAA,EACA,KAAAC;AAAA,EACA,eAAeC;AAAA,EACf,mBAAAC;AAAA,EACA,GAAGrB;AACL,MAAoB;AAClB,QAAMsB,IAAUrC,EAAM,WAAWD,CAAa,GAExCuC,IAAY;AAAA,IAChB,MAAMhC,KAAQV,EAAcyC,EAAQ,IAAI;AAAA,IACxC,OACE9B,KACAV,EAAewC,EAAQ,OAAO,EAC5BA,EAAQ,UAAU,aAAa,aAAaA,EAAQ,KACtD;AAAA,IACF,SAAShC,KAAWP,EAAiBuC,EAAQ,MAAM;AAAA,EAAA,GAG/CE,IAAaL,IAAsC,EAAE,KAAAA,EAAA,IAAlC,EAAE,eAAeC,EAAA;AAO1C,SAAIE,EAAQ,UAAU,aAAaD,MAAsB,YAChD,OAIP,gBAAAT;AAAA,IAACa;AAAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,oBAAgB;AAAA,MAChB,0BAAwBK,EAAU;AAAA,MACjC,GAAGC;AAAA,MACH,GAAGD;AAAA,MACH,GAAGvB;AAAA,IAAA;AAAA,EAAA;AAGV,GASM0B,IAAO,CAAwB;AAAA,EACnC,IAAArC;AAAA,EACA,OAAAG;AAAA,EACA,MAAAD;AAAA,EACA,QAAAoC,IAAS;AAAA,EACT,OAAA5B;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAMsB,IAAUrC,EAAM,WAAWD,CAAa,GACxC4C,IACJpC,KACAZ,EAAe0C,EAAQ,OAAO,EAC5BA,EAAQ,UAAU,aAAa,aAAaA,EAAQ,KACtD;AACF,SACE,gBAAAV;AAAA,IAACiB;AAAAA,IAAA;AAAA,MACC,IAAKxC,KAAM;AAAA,MACX,OAAOuC;AAAA,MACP,MAAMrC,KAAQZ,EAAc2C,EAAQ,IAAI;AAAA,MACxC,QAAAK;AAAA,MACA,qBAAqB;AAAA,MACrB,oBAAgB;AAAA,MAChB,0BAAwBC;AAAA,MACxB,OAAO;AAAA,QACL,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,GAAG7B;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAmBM8B,IAAU,CAAwB;AAAA,EACtC,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAd;AAAA,EACA,UAAApB;AAAA,EACA,GAAGE;AACL,MAAuB;AACrB,QAAMiC,IAAsBF,KAAeb;AAC3C,SACE,gBAAAL,EAACzB,GAAA,EAAM,GAAGY,GACP,UAAA;AAAA,IAAAiC,KACC,gBAAArB,EAACI,GAAA,EAAM,GAAGiB,GAAqB,mBAAkB,WAAU;AAAA,IAE5DnC,KAAY,gBAAAc,EAACc,GAAA,EAAM,UAAA5B,EAAA,CAAS;AAAA,IAC5BkC,KAAgB,gBAAApB,EAACI,GAAA,EAAM,GAAGgB,GAAc,mBAAkB,WAAA,CAAW;AAAA,EAAA,GACxE;AAEJ;AAEA,OAAO,OAAOF,GAAS;AAAA,EACrB,MAAA1C;AAAA,EACA,MAAA4B;AAAA,EACA,MAAAU;AACF,CAAC;AAED,MAAMQ,KAASJ;"}

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

@@ -14,48 +14,56 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_backgroundColor: "gray-11";
             readonly focus_backgroundColor: "gray-10";
             readonly active_backgroundColor: "gray-10";
+            readonly hover_textColor: "white";
         };
         readonly accent: {
             readonly backgroundColor: "accent-9";
             readonly hover_backgroundColor: "accent-10";
             readonly focus_backgroundColor: "accent-11";
             readonly active_backgroundColor: "accent-11";
+            readonly hover_textColor: "white";
         };
         readonly red: {
             readonly backgroundColor: "red-9";
             readonly hover_backgroundColor: "red-10";
             readonly focus_backgroundColor: "red-11";
             readonly active_backgroundColor: "red-11";
+            readonly hover_textColor: "white";
         };
         readonly gray: {
             readonly backgroundColor: "gray-9";
             readonly hover_backgroundColor: "gray-10";
             readonly focus_backgroundColor: "gray-11";
             readonly active_backgroundColor: "gray-11";
+            readonly hover_textColor: "white";
         };
         readonly green: {
             readonly backgroundColor: "green-9";
             readonly hover_backgroundColor: "green-10";
             readonly focus_backgroundColor: "green-11";
             readonly active_backgroundColor: "green-11";
+            readonly hover_textColor: "white";
         };
         readonly blue: {
             readonly backgroundColor: "blue-9";
             readonly hover_backgroundColor: "blue-10";
             readonly focus_backgroundColor: "blue-11";
             readonly active_backgroundColor: "blue-11";
+            readonly hover_textColor: "white";
         };
         readonly yellow: {
             readonly backgroundColor: "yellow-9";
             readonly hover_backgroundColor: "yellow-10";
             readonly focus_backgroundColor: "yellow-11";
             readonly active_backgroundColor: "yellow-11";
+            readonly hover_textColor: "white";
         };
         readonly purple: {
             readonly backgroundColor: "purple-9";
             readonly hover_backgroundColor: "purple-10";
             readonly focus_backgroundColor: "purple-11";
             readonly active_backgroundColor: "purple-11";
+            readonly hover_textColor: "white";
         };
     };
     readonly soft: {
@@ -64,48 +72,56 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_backgroundColor: "gray-4";
             readonly focus_backgroundColor: "gray-5";
             readonly active_backgroundColor: "gray-5";
+            readonly hover_textColor: "gray-12";
         };
         readonly gray: {
             readonly backgroundColor: "gray-3";
             readonly hover_backgroundColor: "gray-4";
             readonly focus_backgroundColor: "gray-5";
             readonly active_backgroundColor: "gray-5";
+            readonly hover_textColor: "gray-12";
         };
         readonly red: {
             readonly backgroundColor: "red-3";
             readonly hover_backgroundColor: "red-4";
             readonly focus_backgroundColor: "red-5";
             readonly active_backgroundColor: "red-5";
+            readonly hover_textColor: "red-11";
         };
         readonly accent: {
             readonly backgroundColor: "accent-3";
             readonly hover_backgroundColor: "accent-4";
             readonly focus_backgroundColor: "accent-5";
             readonly active_backgroundColor: "accent-5";
+            readonly hover_textColor: "accent-11";
         };
         readonly green: {
             readonly backgroundColor: "green-3";
             readonly hover_backgroundColor: "green-4";
             readonly focus_backgroundColor: "green-5";
             readonly active_backgroundColor: "green-5";
+            readonly hover_textColor: "green-11";
         };
         readonly blue: {
             readonly backgroundColor: "blue-3";
             readonly hover_backgroundColor: "blue-4";
             readonly focus_backgroundColor: "blue-5";
             readonly active_backgroundColor: "blue-5";
+            readonly hover_textColor: "blue-11";
         };
         readonly yellow: {
             readonly backgroundColor: "yellow-3";
             readonly hover_backgroundColor: "yellow-4";
             readonly focus_backgroundColor: "yellow-5";
             readonly active_backgroundColor: "yellow-5";
+            readonly hover_textColor: "yellow-11";
         };
         readonly purple: {
             readonly backgroundColor: "purple-3";
             readonly hover_backgroundColor: "purple-4";
             readonly focus_backgroundColor: "purple-5";
             readonly active_backgroundColor: "purple-5";
+            readonly hover_textColor: "purple-11";
         };
     };
     readonly outline: {
@@ -116,6 +132,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "gray-7";
             readonly focus_buttonShadowColor: "gray-8";
             readonly active_buttonShadowColor: "gray-8";
+            readonly hover_textColor: "gray-12";
         };
         readonly gray: {
             readonly backgroundColor: "surface-1";
@@ -124,6 +141,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "gray-7";
             readonly focus_buttonShadowColor: "gray-8";
             readonly active_buttonShadowColor: "gray-8";
+            readonly hover_textColor: "gray-12";
         };
         readonly red: {
             readonly backgroundColor: "surface-1";
@@ -132,6 +150,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "red-7";
             readonly focus_buttonShadowColor: "red-8";
             readonly active_buttonShadowColor: "red-8";
+            readonly hover_textColor: "red-11";
         };
         readonly accent: {
             readonly backgroundColor: "surface-1";
@@ -140,6 +159,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "accent-7";
             readonly focus_buttonShadowColor: "accent-8";
             readonly active_buttonShadowColor: "accent-8";
+            readonly hover_textColor: "accent-11";
         };
         readonly green: {
             readonly backgroundColor: "surface-1";
@@ -148,6 +168,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "green-7";
             readonly focus_buttonShadowColor: "green-8";
             readonly active_buttonShadowColor: "green-8";
+            readonly hover_textColor: "green-11";
         };
         readonly blue: {
             readonly backgroundColor: "surface-1";
@@ -156,6 +177,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "blue-7";
             readonly focus_buttonShadowColor: "blue-8";
             readonly active_buttonShadowColor: "blue-8";
+            readonly hover_textColor: "blue-11";
         };
         readonly yellow: {
             readonly backgroundColor: "surface-1";
@@ -164,6 +186,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "yellow-7";
             readonly focus_buttonShadowColor: "yellow-8";
             readonly active_buttonShadowColor: "yellow-8";
+            readonly hover_textColor: "yellow-11";
         };
         readonly purple: {
             readonly backgroundColor: "surface-1";
@@ -172,6 +195,7 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_buttonShadowColor: "purple-7";
             readonly focus_buttonShadowColor: "purple-8";
             readonly active_buttonShadowColor: "purple-8";
+            readonly hover_textColor: "purple-11";
         };
     };
     readonly ghost: {
@@ -194,36 +218,42 @@ export declare const BUTTON_COLOR_MAP: {
             readonly hover_backgroundColor: "red-3";
             readonly focus_backgroundColor: "red-4";
             readonly active_backgroundColor: "red-4";
+            readonly hover_textColor: "red-11";
         };
         readonly accent: {
             readonly backgroundColor: "transparent";
             readonly hover_backgroundColor: "accent-3";
             readonly focus_backgroundColor: "accent-4";
             readonly active_backgroundColor: "accent-4";
+            readonly hover_textColor: "accent-11";
         };
         readonly green: {
             readonly backgroundColor: "transparent";
             readonly hover_backgroundColor: "green-3";
             readonly focus_backgroundColor: "green-4";
             readonly active_backgroundColor: "green-4";
+            readonly hover_textColor: "green-11";
         };
         readonly blue: {
             readonly backgroundColor: "transparent";
             readonly hover_backgroundColor: "blue-3";
             readonly focus_backgroundColor: "blue-4";
             readonly active_backgroundColor: "blue-4";
+            readonly hover_textColor: "blue-11";
         };
         readonly yellow: {
             readonly backgroundColor: "transparent";
             readonly hover_backgroundColor: "yellow-3";
             readonly focus_backgroundColor: "yellow-4";
             readonly active_backgroundColor: "yellow-4";
+            readonly hover_textColor: "yellow-11";
         };
         readonly purple: {
             readonly backgroundColor: "transparent";
             readonly hover_backgroundColor: "purple-3";
             readonly focus_backgroundColor: "purple-4";
             readonly active_backgroundColor: "purple-4";
+            readonly hover_textColor: "purple-11";
         };
     };
 };

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NnB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/button",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Button component in Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/button",
   "author": "@knocklabs",