@contentful/f36-button - npm Package Compare versions

Comparing version 4.58.4 to 4.59.0

dist/esm/index.js

@@ -8,8 +8,8 @@ import { cx, css } from 'emotion';
 
-var io=Object.defineProperty,so=Object.defineProperties;var ao=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var A=(t,r,e)=>r in t?io(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,i=(t,r)=>{for(var e in r||(r={}))G.call(r,e)&&A(t,e,r[e]);if(T)for(var e of T(r))_.call(r,e)&&A(t,e,r[e]);return t},B=(t,r)=>so(t,ao(r));var y=(t,r)=>{var e={};for(var n in t)G.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&T)for(var n of T(t))r.indexOf(n)<0&&_.call(t,n)&&(e[n]=t[n]);return e};var O=({withDivider:t})=>{let r=lo(t);return {buttonGroup:css({display:"inline-flex",position:"relative"}),groupContent:css(i({borderRadius:"0 !important",marginRight:"-1px","&:first-child":{borderBottomLeftRadius:`${o.borderRadiusMedium} !important`,borderTopLeftRadius:`${o.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o.borderRadiusMedium} !important`,borderTopRightRadius:`${o.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o.zIndexDefault}},r))}},lo=t=>{if(!t)return {};let r=`1px solid ${hexToRGBA(o.colorWhite,.2)}`;return {borderTop:"none",borderBottom:"none","&:not(:first-child,:focus-visible)":{borderLeft:r},"&:not(:last-child,:focus-visible)":{borderRight:r}}};function L(t,r){let{variant:e="merged",withDivider:n,testId:s="cf-ui-button-group",children:a,className:l,spacing:p}=t,c=O({withDivider:n});return e==="spaced"?m.createElement(Stack,{className:l,isInline:!0,flexDirection:"row",testId:s,ref:r,spacing:p},a):m.createElement(Box,{testId:s,ref:r,className:cx(c.buttonGroup,l)},m.Children.map(a,(u,g)=>u?m.cloneElement(u,{key:g,className:cx(c.groupContent,u.props.className)}):null))}L.displayName="ButtonGroup";var H=m.forwardRef(L);var x=t=>{switch(t){case"primary":return {backgroundColor:o.blue700};case"secondary":return {backgroundColor:o.gray200};case"positive":return {backgroundColor:o.green700};case"negative":return {backgroundColor:o.gray200};case"transparent":return {backgroundColor:hexToRGBA(o.gray900,.1)};default:return {}}},mo=t=>{switch(t){case"primary":return {color:o.colorWhite,backgroundColor:o.blue500,borderColor:"transparent","&:hover":{backgroundColor:o.blue600,color:o.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o.glowPrimary}};case"secondary":return {color:o.gray900,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.gray900},"&:active":x(t),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};case"positive":return {color:o.colorWhite,backgroundColor:o.green500,borderColor:"transparent","&:hover":{backgroundColor:o.green600,color:o.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o.glowPositive}};case"negative":return {color:o.red600,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.red600},"&:active":x(t),"&:focus-visible":{boxShadow:o.glowNegative}};case"transparent":return {color:o.gray900,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:hexToRGBA(o.gray900,.05)},"&:active":x(t),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};default:return {}}},go=(t,r)=>{let e=r==="high";switch(t){case"small":return {fontSize:e?o.fontSizeS:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:e?`${o.spacing2Xs} ${o.spacingXs}`:`${o.spacing2Xs} ${o.spacingS}`,minHeight:e?"16px":"32px"};case"medium":return {fontSize:e?o.fontSizeS:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:e?`${o.spacingXs} ${o.spacingS}`:`${o.spacingXs} ${o.spacingM}`,minHeight:e?"32px":"40px"};case"large":return {fontSize:o.fontSizeXl,lineHeight:o.lineHeightXl,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"48px"};default:return {}}},fo=({hasChildren:t,variant:r})=>{let e={"&:first-child":{marginRight:o.spacing2Xs},"&:last-child":{marginLeft:o.spacing2Xs}};return css([t?e:{},r!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},W=()=>({button:({variant:t,size:r,density:e,isActive:n,isDisabled:s,isFullWidth:a})=>css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:e==="high"?o.borderRadiusSmall:o.borderRadiusMedium,cursor:s?"not-allowed":"pointer",fontFamily:o.fontStackPrimary,opacity:s?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
+var io=Object.defineProperty,so=Object.defineProperties;var ao=Object.getOwnPropertyDescriptors;var I=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var A=(t,r,e)=>r in t?io(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,i=(t,r)=>{for(var e in r||(r={}))G.call(r,e)&&A(t,e,r[e]);if(I)for(var e of I(r))_.call(r,e)&&A(t,e,r[e]);return t},S=(t,r)=>so(t,ao(r));var b=(t,r)=>{var e={};for(var n in t)G.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&I)for(var n of I(t))r.indexOf(n)<0&&_.call(t,n)&&(e[n]=t[n]);return e};var X=({withDivider:t})=>{let r=co(t);return {buttonGroup:css({display:"inline-flex",position:"relative"}),groupContent:css(i({borderRadius:"0 !important",marginRight:"-1px","&:first-child":{borderBottomLeftRadius:`${o.borderRadiusMedium} !important`,borderTopLeftRadius:`${o.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o.borderRadiusMedium} !important`,borderTopRightRadius:`${o.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o.zIndexDefault}},r))}},co=t=>{if(!t)return {};let r=`1px solid ${hexToRGBA(o.colorWhite,.2)}`;return {borderTop:"none",borderBottom:"none","&:not(:first-child,:focus-visible)":{borderLeft:r},"&:not(:last-child,:focus-visible)":{borderRight:r}}};function L(t,r){let{variant:e="merged",withDivider:n,testId:s="cf-ui-button-group",children:a,className:c,spacing:p}=t,l=X({withDivider:n});return e==="spaced"?m.createElement(Stack,{className:c,isInline:!0,flexDirection:"row",testId:s,ref:r,spacing:p},a):m.createElement(Box,{testId:s,ref:r,className:cx(l.buttonGroup,c)},m.Children.map(a,(u,g)=>u?m.cloneElement(u,{key:g,className:cx(l.groupContent,u.props.className)}):null))}L.displayName="ButtonGroup";var H=m.forwardRef(L);var x=t=>{switch(t){case"primary":return {backgroundColor:o.blue700};case"secondary":return {backgroundColor:o.gray200};case"positive":return {backgroundColor:o.green700};case"negative":return {backgroundColor:o.gray200};case"transparent":return {backgroundColor:hexToRGBA(o.gray900,.1)};default:return {}}},mo=t=>{switch(t){case"primary":return {color:o.colorWhite,backgroundColor:o.blue500,borderColor:"transparent","&:hover":{backgroundColor:o.blue600,color:o.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o.glowPrimary}};case"secondary":return {color:o.gray900,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.gray900},"&:active":x(t),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};case"positive":return {color:o.colorWhite,backgroundColor:o.green500,borderColor:"transparent","&:hover":{backgroundColor:o.green600,color:o.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o.glowPositive}};case"negative":return {color:o.red600,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.red600},"&:active":x(t),"&:focus-visible":{boxShadow:o.glowNegative}};case"transparent":return {color:o.gray900,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:hexToRGBA(o.gray900,.05)},"&:active":x(t),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};default:return {}}},go=(t,r)=>{let e=r==="high";switch(t){case"small":return {fontSize:e?o.fontSizeS:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:e?`${o.spacing2Xs} ${o.spacingXs}`:`${o.spacing2Xs} ${o.spacingS}`,minHeight:e?o.spacingL:o.spacingXl,maxHeight:e?o.spacingL:o.spacingXl};case"medium":return {fontSize:e?o.fontSizeS:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:e?`${o.spacingXs} ${o.spacingS}`:`${o.spacingXs} ${o.spacingM}`,minHeight:e?o.spacingXl:"40px",maxHeight:e?o.spacingXl:"40px"};case"large":return {fontSize:o.fontSizeXl,lineHeight:o.lineHeightXl,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"48px",maxHeight:"48px"};default:return {}}},fo=({hasChildren:t,variant:r})=>{let e={"&:first-child":{marginRight:o.spacing2Xs},"&:last-child":{marginLeft:o.spacing2Xs}};return css([t?e:{},r!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},W=()=>({button:({variant:t,size:r,density:e,isActive:n,isDisabled:s,isFullWidth:a})=>css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:e==="high"?o.borderRadiusSmall:o.borderRadiusMedium,cursor:s?"not-allowed":"pointer",fontFamily:o.fontStackPrimary,opacity:s?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
         opacity ${o.transitionDurationDefault} ${o.transitionEasingDefault},
-        border-color ${o.transitionDurationDefault} ${o.transitionEasingDefault}`},mo(t)),go(r,e)),n?{transition:"none","&, &:focus":x(t)}:{})),buttonIcon:fo,buttonContent:css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var Bo="button";function F(t,r){let e=W(),N=t,{as:n=Bo,children:s,className:a,testId:l="cf-ui-button",variant:p="secondary",size:c="medium",startIcon:u,endIcon:g,isActive:I,isDisabled:P,isLoading:f,isFullWidth:oo,style:to}=N,z=y(N,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),eo=useDensity(),ro=cx(e.button({variant:p,size:c,density:eo,isActive:I,isDisabled:P,isFullWidth:oo}),a),E=v=>{var k;let no={primary:"white",secondary:"secondary",positive:"white",negative:"negative",transparent:"secondary"};return !f&&m.createElement(Flex,{as:"span",className:e.buttonIcon({hasChildren:!!s,variant:p})},m.cloneElement(v,{size:(k=v.props.size)!=null?k:`${c==="large"?"medium":"small"}`,variant:p==="transparent"&&v.props.variant||no[p]}))},D=m.createElement(m.Fragment,null,u&&E(u),s&&m.createElement(Box,{as:"span",display:"block",className:e.buttonContent},s),g&&E(g),f&&m.createElement(Box,{as:"span",marginLeft:s||!f?"spacingXs":"none"},m.createElement(Spinner,{customSize:18,variant:p==="secondary"||p==="negative"||p==="transparent"?"default":"white"}))),R={"data-test-id":l,className:ro,ref:r,style:to};return n==="a"?m.createElement("a",B(i(i({},z),R),{disabled:P}),D):m.createElement("button",B(i(i({type:"button"},z),R),{disabled:P}),D)}F.displayName="Button";var h=m.forwardRef(F);var Po=({isActive:t,isDisabled:r})=>{let e={background:o.blue100,borderColor:o.blue600,"&":{zIndex:o.zIndexDefault+1},"&:hover":{background:o.blue100}},n={"&:focus":{boxShadow:o.glowPrimary},"&:focus-visible:not([disabled])":{zIndex:o.zIndexDefault+2},"&:active, &:active:hover":r?{background:o.colorWhite,borderColor:o.gray300}:{background:o.blue100,borderColor:o.blue600}};return t?i(i({},n),e):n},j=({isActive:t,isDisabled:r})=>({toggleButton:css(Po({isActive:t,isDisabled:r}))});function q(t,r){let f=t,{testId:e="cf-ui-toggle-button",children:n,className:s,isDisabled:a=!1,isActive:l=!1,icon:p,onToggle:c,size:u="medium"}=f,g=y(f,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),I=j({isActive:l,isDisabled:a});return m.createElement(h,i({testId:e,type:"button",ref:r,size:u,onClick:()=>{!a&&c&&c();},className:cx(I.toggleButton,s),startIcon:p,isDisabled:a,"aria-pressed":l,"data-state":l?"on":"off"},g),n)}q.displayName="ToggleButton";var J=m.forwardRef(q);function vo(t,r){let e=r==="high";switch(t){case"small":return {padding:e?`${o.spacing2Xs}`:o.spacing2Xs,minHeight:e?"16px":"32px",minWidth:e?"16px":"32px"};case"medium":return {padding:o.spacingXs,minHeight:e?"32px":"40px",minWidth:e?"32px":"40px"};default:return {}}}function K({size:t,density:r}){return {iconButton:css(i({},vo(t,r)))}}function Y(t,r){let g=t,{testId:e="cf-ui-icon-button",variant:n="transparent",icon:s,className:a,size:l="medium"}=g,p=y(g,["testId","variant","icon","className","size"]),c=useDensity(),u=K({size:l,density:c});return m.createElement(h,B(i({testId:e,ref:r,variant:n,className:cx(u.iconButton,a),size:l},p),{startIcon:s}))}Y.displayName="IconButton";var Z=m.forwardRef(Y);
+        border-color ${o.transitionDurationDefault} ${o.transitionEasingDefault}`},mo(t)),go(r,e)),n?{transition:"none","&, &:focus":x(t)}:{})),buttonIcon:fo,buttonContent:css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var Bo="button";function F(t,r){let e=W(),N=t,{as:n=Bo,children:s,className:a,testId:c="cf-ui-button",variant:p="secondary",size:l="medium",startIcon:u,endIcon:g,isActive:v,isDisabled:T,isLoading:y,isFullWidth:oo,style:to}=N,z=b(N,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),eo=useDensity(),ro=cx(e.button({variant:p,size:l,density:eo,isActive:v,isDisabled:T,isFullWidth:oo}),a),E=C=>{var k;let no={primary:"white",secondary:"secondary",positive:"white",negative:"negative",transparent:"secondary"};return !y&&m.createElement(Flex,{as:"span",className:e.buttonIcon({hasChildren:!!s,variant:p})},m.cloneElement(C,{size:(k=C.props.size)!=null?k:`${l==="large"?"medium":"small"}`,variant:p==="transparent"&&C.props.variant||no[p]}))},D=m.createElement(m.Fragment,null,u&&E(u),s&&m.createElement(Box,{as:"span",display:"block",className:e.buttonContent},s),g&&E(g),y&&m.createElement(Box,{as:"span",marginLeft:s||!y?"spacingXs":"none"},m.createElement(Spinner,{customSize:18,variant:p==="secondary"||p==="negative"||p==="transparent"?"default":"white"}))),R={"data-test-id":c,className:ro,ref:r,style:to};return n==="a"?m.createElement("a",S(i(i({},z),R),{disabled:T}),D):m.createElement("button",S(i(i({type:"button"},z),R),{disabled:T}),D)}F.displayName="Button";var B=m.forwardRef(F);var Po=({isActive:t,isDisabled:r})=>{let e={background:o.blue100,borderColor:o.blue600,"&":{zIndex:o.zIndexDefault+1},"&:hover":{background:o.blue100}},n={"&:focus":{boxShadow:o.glowPrimary},"&:focus-visible:not([disabled])":{zIndex:o.zIndexDefault+2},"&:active, &:active:hover":r?{background:o.colorWhite,borderColor:o.gray300}:{background:o.blue100,borderColor:o.blue600}};return t?i(i({},n),e):n},j=({isActive:t,isDisabled:r})=>({toggleButton:css(Po({isActive:t,isDisabled:r}))});function q(t,r){let y=t,{testId:e="cf-ui-toggle-button",children:n,className:s,isDisabled:a=!1,isActive:c=!1,icon:p,onToggle:l,size:u="medium"}=y,g=b(y,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),v=j({isActive:c,isDisabled:a});return m.createElement(B,i({testId:e,type:"button",ref:r,size:u,onClick:()=>{!a&&l&&l();},className:cx(v.toggleButton,s),startIcon:p,isDisabled:a,"aria-pressed":c,"data-state":c?"on":"off"},g),n)}q.displayName="ToggleButton";var J=m.forwardRef(q);function vo(t,r){let e=r==="high";switch(t){case"small":return {padding:e?`${o.spacing2Xs}`:o.spacing2Xs,minHeight:e?o.spacingL:o.spacingXl,minWidth:e?o.spacingL:o.spacingXl};case"medium":return {padding:o.spacingXs,minHeight:e?o.spacingXl:"40px",minWidth:e?o.spacingXl:"40px"};default:return {}}}function K({size:t,density:r}){return {iconButton:css(i({},vo(t,r)))}}function Y(t,r){let g=t,{testId:e="cf-ui-icon-button",variant:n="transparent",icon:s,className:a,size:c="medium"}=g,p=b(g,["testId","variant","icon","className","size"]),l=useDensity(),u=K({size:c,density:l});return m.createElement(B,S(i({testId:e,ref:r,variant:n,className:cx(u.iconButton,a),size:c},p),{startIcon:s}))}Y.displayName="IconButton";var Z=m.forwardRef(Y);
 
-export { h as Button, H as ButtonGroup, Z as IconButton, J as ToggleButton };
+export { B as Button, H as ButtonGroup, Z as IconButton, J as ToggleButton };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -15,7 +15,7 @@ 'use strict';
 
-var io=Object.defineProperty,so=Object.defineProperties;var ao=Object.getOwnPropertyDescriptors;var T=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var A=(t,r,e)=>r in t?io(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,i=(t,r)=>{for(var e in r||(r={}))G.call(r,e)&&A(t,e,r[e]);if(T)for(var e of T(r))_.call(r,e)&&A(t,e,r[e]);return t},B=(t,r)=>so(t,ao(r));var y=(t,r)=>{var e={};for(var n in t)G.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&T)for(var n of T(t))r.indexOf(n)<0&&_.call(t,n)&&(e[n]=t[n]);return e};var O=({withDivider:t})=>{let r=lo(t);return {buttonGroup:emotion.css({display:"inline-flex",position:"relative"}),groupContent:emotion.css(i({borderRadius:"0 !important",marginRight:"-1px","&:first-child":{borderBottomLeftRadius:`${o__default.default.borderRadiusMedium} !important`,borderTopLeftRadius:`${o__default.default.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o__default.default.borderRadiusMedium} !important`,borderTopRightRadius:`${o__default.default.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o__default.default.zIndexDefault}},r))}},lo=t=>{if(!t)return {};let r=`1px solid ${f36Utils.hexToRGBA(o__default.default.colorWhite,.2)}`;return {borderTop:"none",borderBottom:"none","&:not(:first-child,:focus-visible)":{borderLeft:r},"&:not(:last-child,:focus-visible)":{borderRight:r}}};function L(t,r){let{variant:e="merged",withDivider:n,testId:s="cf-ui-button-group",children:a,className:l,spacing:p}=t,c=O({withDivider:n});return e==="spaced"?m__default.default.createElement(f36Core.Stack,{className:l,isInline:!0,flexDirection:"row",testId:s,ref:r,spacing:p},a):m__default.default.createElement(f36Core.Box,{testId:s,ref:r,className:emotion.cx(c.buttonGroup,l)},m__default.default.Children.map(a,(u,g)=>u?m__default.default.cloneElement(u,{key:g,className:emotion.cx(c.groupContent,u.props.className)}):null))}L.displayName="ButtonGroup";var H=m__default.default.forwardRef(L);var x=t=>{switch(t){case"primary":return {backgroundColor:o__default.default.blue700};case"secondary":return {backgroundColor:o__default.default.gray200};case"positive":return {backgroundColor:o__default.default.green700};case"negative":return {backgroundColor:o__default.default.gray200};case"transparent":return {backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.1)};default:return {}}},mo=t=>{switch(t){case"primary":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.blue500,borderColor:"transparent","&:hover":{backgroundColor:o__default.default.blue600,color:o__default.default.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};case"secondary":return {color:o__default.default.gray900,backgroundColor:o__default.default.colorWhite,borderColor:o__default.default.gray300,"&:hover":{backgroundColor:o__default.default.gray100,color:o__default.default.gray900},"&:active":x(t),"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};case"positive":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.green500,borderColor:"transparent","&:hover":{backgroundColor:o__default.default.green600,color:o__default.default.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o__default.default.glowPositive}};case"negative":return {color:o__default.default.red600,backgroundColor:o__default.default.colorWhite,borderColor:o__default.default.gray300,"&:hover":{backgroundColor:o__default.default.gray100,color:o__default.default.red600},"&:active":x(t),"&:focus-visible":{boxShadow:o__default.default.glowNegative}};case"transparent":return {color:o__default.default.gray900,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.05)},"&:active":x(t),"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};default:return {}}},go=(t,r)=>{let e=r==="high";switch(t){case"small":return {fontSize:e?o__default.default.fontSizeS:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightCondensed,padding:e?`${o__default.default.spacing2Xs} ${o__default.default.spacingXs}`:`${o__default.default.spacing2Xs} ${o__default.default.spacingS}`,minHeight:e?"16px":"32px"};case"medium":return {fontSize:e?o__default.default.fontSizeS:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightCondensed,padding:e?`${o__default.default.spacingXs} ${o__default.default.spacingS}`:`${o__default.default.spacingXs} ${o__default.default.spacingM}`,minHeight:e?"32px":"40px"};case"large":return {fontSize:o__default.default.fontSizeXl,lineHeight:o__default.default.lineHeightXl,padding:`${o__default.default.spacingXs} ${o__default.default.spacingM}`,minHeight:"48px"};default:return {}}},fo=({hasChildren:t,variant:r})=>{let e={"&:first-child":{marginRight:o__default.default.spacing2Xs},"&:last-child":{marginLeft:o__default.default.spacing2Xs}};return emotion.css([t?e:{},r!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},W=()=>({button:({variant:t,size:r,density:e,isActive:n,isDisabled:s,isFullWidth:a})=>emotion.css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:e==="high"?o__default.default.borderRadiusSmall:o__default.default.borderRadiusMedium,cursor:s?"not-allowed":"pointer",fontFamily:o__default.default.fontStackPrimary,opacity:s?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o__default.default.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o__default.default.transitionDurationShort} ${o__default.default.transitionEasingDefault},
+var io=Object.defineProperty,so=Object.defineProperties;var ao=Object.getOwnPropertyDescriptors;var I=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var A=(t,r,e)=>r in t?io(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,i=(t,r)=>{for(var e in r||(r={}))G.call(r,e)&&A(t,e,r[e]);if(I)for(var e of I(r))_.call(r,e)&&A(t,e,r[e]);return t},S=(t,r)=>so(t,ao(r));var b=(t,r)=>{var e={};for(var n in t)G.call(t,n)&&r.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&I)for(var n of I(t))r.indexOf(n)<0&&_.call(t,n)&&(e[n]=t[n]);return e};var X=({withDivider:t})=>{let r=co(t);return {buttonGroup:emotion.css({display:"inline-flex",position:"relative"}),groupContent:emotion.css(i({borderRadius:"0 !important",marginRight:"-1px","&:first-child":{borderBottomLeftRadius:`${o__default.default.borderRadiusMedium} !important`,borderTopLeftRadius:`${o__default.default.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o__default.default.borderRadiusMedium} !important`,borderTopRightRadius:`${o__default.default.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o__default.default.zIndexDefault}},r))}},co=t=>{if(!t)return {};let r=`1px solid ${f36Utils.hexToRGBA(o__default.default.colorWhite,.2)}`;return {borderTop:"none",borderBottom:"none","&:not(:first-child,:focus-visible)":{borderLeft:r},"&:not(:last-child,:focus-visible)":{borderRight:r}}};function L(t,r){let{variant:e="merged",withDivider:n,testId:s="cf-ui-button-group",children:a,className:c,spacing:p}=t,l=X({withDivider:n});return e==="spaced"?m__default.default.createElement(f36Core.Stack,{className:c,isInline:!0,flexDirection:"row",testId:s,ref:r,spacing:p},a):m__default.default.createElement(f36Core.Box,{testId:s,ref:r,className:emotion.cx(l.buttonGroup,c)},m__default.default.Children.map(a,(u,g)=>u?m__default.default.cloneElement(u,{key:g,className:emotion.cx(l.groupContent,u.props.className)}):null))}L.displayName="ButtonGroup";var H=m__default.default.forwardRef(L);var x=t=>{switch(t){case"primary":return {backgroundColor:o__default.default.blue700};case"secondary":return {backgroundColor:o__default.default.gray200};case"positive":return {backgroundColor:o__default.default.green700};case"negative":return {backgroundColor:o__default.default.gray200};case"transparent":return {backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.1)};default:return {}}},mo=t=>{switch(t){case"primary":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.blue500,borderColor:"transparent","&:hover":{backgroundColor:o__default.default.blue600,color:o__default.default.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};case"secondary":return {color:o__default.default.gray900,backgroundColor:o__default.default.colorWhite,borderColor:o__default.default.gray300,"&:hover":{backgroundColor:o__default.default.gray100,color:o__default.default.gray900},"&:active":x(t),"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};case"positive":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.green500,borderColor:"transparent","&:hover":{backgroundColor:o__default.default.green600,color:o__default.default.colorWhite},"&:active":x(t),"&:focus-visible":{boxShadow:o__default.default.glowPositive}};case"negative":return {color:o__default.default.red600,backgroundColor:o__default.default.colorWhite,borderColor:o__default.default.gray300,"&:hover":{backgroundColor:o__default.default.gray100,color:o__default.default.red600},"&:active":x(t),"&:focus-visible":{boxShadow:o__default.default.glowNegative}};case"transparent":return {color:o__default.default.gray900,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.05)},"&:active":x(t),"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};default:return {}}},go=(t,r)=>{let e=r==="high";switch(t){case"small":return {fontSize:e?o__default.default.fontSizeS:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightCondensed,padding:e?`${o__default.default.spacing2Xs} ${o__default.default.spacingXs}`:`${o__default.default.spacing2Xs} ${o__default.default.spacingS}`,minHeight:e?o__default.default.spacingL:o__default.default.spacingXl,maxHeight:e?o__default.default.spacingL:o__default.default.spacingXl};case"medium":return {fontSize:e?o__default.default.fontSizeS:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightCondensed,padding:e?`${o__default.default.spacingXs} ${o__default.default.spacingS}`:`${o__default.default.spacingXs} ${o__default.default.spacingM}`,minHeight:e?o__default.default.spacingXl:"40px",maxHeight:e?o__default.default.spacingXl:"40px"};case"large":return {fontSize:o__default.default.fontSizeXl,lineHeight:o__default.default.lineHeightXl,padding:`${o__default.default.spacingXs} ${o__default.default.spacingM}`,minHeight:"48px",maxHeight:"48px"};default:return {}}},fo=({hasChildren:t,variant:r})=>{let e={"&:first-child":{marginRight:o__default.default.spacing2Xs},"&:last-child":{marginLeft:o__default.default.spacing2Xs}};return emotion.css([t?e:{},r!=="transparent"&&t&&{"& svg":{fill:"currentColor"}}])},W=()=>({button:({variant:t,size:r,density:e,isActive:n,isDisabled:s,isFullWidth:a})=>emotion.css(i(i(i({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:e==="high"?o__default.default.borderRadiusSmall:o__default.default.borderRadiusMedium,cursor:s?"not-allowed":"pointer",fontFamily:o__default.default.fontStackPrimary,opacity:s?.5:1,display:a?"flex":"inline-flex",minWidth:a?"100%":"auto",maxWidth:a?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o__default.default.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o__default.default.transitionDurationShort} ${o__default.default.transitionEasingDefault},
         opacity ${o__default.default.transitionDurationDefault} ${o__default.default.transitionEasingDefault},
-        border-color ${o__default.default.transitionDurationDefault} ${o__default.default.transitionEasingDefault}`},mo(t)),go(r,e)),n?{transition:"none","&, &:focus":x(t)}:{})),buttonIcon:fo,buttonContent:emotion.css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var Bo="button";function F(t,r){let e=W(),N=t,{as:n=Bo,children:s,className:a,testId:l="cf-ui-button",variant:p="secondary",size:c="medium",startIcon:u,endIcon:g,isActive:I,isDisabled:P,isLoading:f,isFullWidth:oo,style:to}=N,z=y(N,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),eo=f36Utils.useDensity(),ro=emotion.cx(e.button({variant:p,size:c,density:eo,isActive:I,isDisabled:P,isFullWidth:oo}),a),E=v=>{var k;let no={primary:"white",secondary:"secondary",positive:"white",negative:"negative",transparent:"secondary"};return !f&&m__default.default.createElement(f36Core.Flex,{as:"span",className:e.buttonIcon({hasChildren:!!s,variant:p})},m__default.default.cloneElement(v,{size:(k=v.props.size)!=null?k:`${c==="large"?"medium":"small"}`,variant:p==="transparent"&&v.props.variant||no[p]}))},D=m__default.default.createElement(m__default.default.Fragment,null,u&&E(u),s&&m__default.default.createElement(f36Core.Box,{as:"span",display:"block",className:e.buttonContent},s),g&&E(g),f&&m__default.default.createElement(f36Core.Box,{as:"span",marginLeft:s||!f?"spacingXs":"none"},m__default.default.createElement(f36Spinner.Spinner,{customSize:18,variant:p==="secondary"||p==="negative"||p==="transparent"?"default":"white"}))),R={"data-test-id":l,className:ro,ref:r,style:to};return n==="a"?m__default.default.createElement("a",B(i(i({},z),R),{disabled:P}),D):m__default.default.createElement("button",B(i(i({type:"button"},z),R),{disabled:P}),D)}F.displayName="Button";var h=m__default.default.forwardRef(F);var Po=({isActive:t,isDisabled:r})=>{let e={background:o__default.default.blue100,borderColor:o__default.default.blue600,"&":{zIndex:o__default.default.zIndexDefault+1},"&:hover":{background:o__default.default.blue100}},n={"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus-visible:not([disabled])":{zIndex:o__default.default.zIndexDefault+2},"&:active, &:active:hover":r?{background:o__default.default.colorWhite,borderColor:o__default.default.gray300}:{background:o__default.default.blue100,borderColor:o__default.default.blue600}};return t?i(i({},n),e):n},j=({isActive:t,isDisabled:r})=>({toggleButton:emotion.css(Po({isActive:t,isDisabled:r}))});function q(t,r){let f=t,{testId:e="cf-ui-toggle-button",children:n,className:s,isDisabled:a=!1,isActive:l=!1,icon:p,onToggle:c,size:u="medium"}=f,g=y(f,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),I=j({isActive:l,isDisabled:a});return m__default.default.createElement(h,i({testId:e,type:"button",ref:r,size:u,onClick:()=>{!a&&c&&c();},className:emotion.cx(I.toggleButton,s),startIcon:p,isDisabled:a,"aria-pressed":l,"data-state":l?"on":"off"},g),n)}q.displayName="ToggleButton";var J=m__default.default.forwardRef(q);function vo(t,r){let e=r==="high";switch(t){case"small":return {padding:e?`${o__default.default.spacing2Xs}`:o__default.default.spacing2Xs,minHeight:e?"16px":"32px",minWidth:e?"16px":"32px"};case"medium":return {padding:o__default.default.spacingXs,minHeight:e?"32px":"40px",minWidth:e?"32px":"40px"};default:return {}}}function K({size:t,density:r}){return {iconButton:emotion.css(i({},vo(t,r)))}}function Y(t,r){let g=t,{testId:e="cf-ui-icon-button",variant:n="transparent",icon:s,className:a,size:l="medium"}=g,p=y(g,["testId","variant","icon","className","size"]),c=f36Utils.useDensity(),u=K({size:l,density:c});return m__default.default.createElement(h,B(i({testId:e,ref:r,variant:n,className:emotion.cx(u.iconButton,a),size:l},p),{startIcon:s}))}Y.displayName="IconButton";var Z=m__default.default.forwardRef(Y);
+        border-color ${o__default.default.transitionDurationDefault} ${o__default.default.transitionEasingDefault}`},mo(t)),go(r,e)),n?{transition:"none","&, &:focus":x(t)}:{})),buttonIcon:fo,buttonContent:emotion.css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})});var Bo="button";function F(t,r){let e=W(),N=t,{as:n=Bo,children:s,className:a,testId:c="cf-ui-button",variant:p="secondary",size:l="medium",startIcon:u,endIcon:g,isActive:v,isDisabled:T,isLoading:y,isFullWidth:oo,style:to}=N,z=b(N,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),eo=f36Utils.useDensity(),ro=emotion.cx(e.button({variant:p,size:l,density:eo,isActive:v,isDisabled:T,isFullWidth:oo}),a),E=C=>{var k;let no={primary:"white",secondary:"secondary",positive:"white",negative:"negative",transparent:"secondary"};return !y&&m__default.default.createElement(f36Core.Flex,{as:"span",className:e.buttonIcon({hasChildren:!!s,variant:p})},m__default.default.cloneElement(C,{size:(k=C.props.size)!=null?k:`${l==="large"?"medium":"small"}`,variant:p==="transparent"&&C.props.variant||no[p]}))},D=m__default.default.createElement(m__default.default.Fragment,null,u&&E(u),s&&m__default.default.createElement(f36Core.Box,{as:"span",display:"block",className:e.buttonContent},s),g&&E(g),y&&m__default.default.createElement(f36Core.Box,{as:"span",marginLeft:s||!y?"spacingXs":"none"},m__default.default.createElement(f36Spinner.Spinner,{customSize:18,variant:p==="secondary"||p==="negative"||p==="transparent"?"default":"white"}))),R={"data-test-id":c,className:ro,ref:r,style:to};return n==="a"?m__default.default.createElement("a",S(i(i({},z),R),{disabled:T}),D):m__default.default.createElement("button",S(i(i({type:"button"},z),R),{disabled:T}),D)}F.displayName="Button";var B=m__default.default.forwardRef(F);var Po=({isActive:t,isDisabled:r})=>{let e={background:o__default.default.blue100,borderColor:o__default.default.blue600,"&":{zIndex:o__default.default.zIndexDefault+1},"&:hover":{background:o__default.default.blue100}},n={"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus-visible:not([disabled])":{zIndex:o__default.default.zIndexDefault+2},"&:active, &:active:hover":r?{background:o__default.default.colorWhite,borderColor:o__default.default.gray300}:{background:o__default.default.blue100,borderColor:o__default.default.blue600}};return t?i(i({},n),e):n},j=({isActive:t,isDisabled:r})=>({toggleButton:emotion.css(Po({isActive:t,isDisabled:r}))});function q(t,r){let y=t,{testId:e="cf-ui-toggle-button",children:n,className:s,isDisabled:a=!1,isActive:c=!1,icon:p,onToggle:l,size:u="medium"}=y,g=b(y,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),v=j({isActive:c,isDisabled:a});return m__default.default.createElement(B,i({testId:e,type:"button",ref:r,size:u,onClick:()=>{!a&&l&&l();},className:emotion.cx(v.toggleButton,s),startIcon:p,isDisabled:a,"aria-pressed":c,"data-state":c?"on":"off"},g),n)}q.displayName="ToggleButton";var J=m__default.default.forwardRef(q);function vo(t,r){let e=r==="high";switch(t){case"small":return {padding:e?`${o__default.default.spacing2Xs}`:o__default.default.spacing2Xs,minHeight:e?o__default.default.spacingL:o__default.default.spacingXl,minWidth:e?o__default.default.spacingL:o__default.default.spacingXl};case"medium":return {padding:o__default.default.spacingXs,minHeight:e?o__default.default.spacingXl:"40px",minWidth:e?o__default.default.spacingXl:"40px"};default:return {}}}function K({size:t,density:r}){return {iconButton:emotion.css(i({},vo(t,r)))}}function Y(t,r){let g=t,{testId:e="cf-ui-icon-button",variant:n="transparent",icon:s,className:a,size:c="medium"}=g,p=b(g,["testId","variant","icon","className","size"]),l=f36Utils.useDensity(),u=K({size:c,density:l});return m__default.default.createElement(B,S(i({testId:e,ref:r,variant:n,className:emotion.cx(u.iconButton,a),size:c},p),{startIcon:s}))}Y.displayName="IconButton";var Z=m__default.default.forwardRef(Y);
 
-exports.Button = h;
+exports.Button = B;
 exports.ButtonGroup = H;
@@ -22,0 +22,0 @@ exports.IconButton = Z;

package.json

 {
   "name": "@contentful/f36-button",
-  "version": "4.58.4",
+  "version": "4.59.0",
   "description": "Forma 36: Button component",
@@ -9,4 +9,4 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-core": "^4.58.4",
-    "@contentful/f36-spinner": "^4.58.4",
+    "@contentful/f36-core": "^4.59.0",
+    "@contentful/f36-spinner": "^4.59.0",
     "@contentful/f36-tokens": "^4.0.4",
@@ -17,3 +17,3 @@ "@contentful/f36-utils": "^4.24.3",
   "devDependencies": {
-    "@contentful/f36-icon": "^4.58.4",
+    "@contentful/f36-icon": "^4.59.0",
     "@contentful/f36-icons": "^4.27.0"
@@ -20,0 +20,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

88678

increased by1.41%

Lines of code

245

increased by0.41%

Dependency changes

• Updated@contentful/f36-core@^4.59.0

• Updated@contentful/f36-spinner@^4.59.0