@leafygreen-ui/icon-button - npm Package Compare versions

Comparing version 9.1.7 to 10.0.0

CHANGELOG.md

 # @leafygreen-ui/icon-button
 
+## 10.0.0
+
+### Major Changes
+
+- ab1fd9e: Updates Icon Button in line with the visual brand refresh
+
 ## 9.1.7
@@ -4,0 +10,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n from"react";import{css as e,cx as r}from"@leafygreen-ui/emotion";import o from"prop-types";import t from"@leafygreen-ui/box";import{isComponentType as a}from"@leafygreen-ui/lib";import{uiColors as i}from"@leafygreen-ui/palette";import{isComponentGlyph as l}from"@leafygreen-ui/icon";import{validateAriaLabelProps as c}from"@leafygreen-ui/a11y";import{jsx as s}from"@emotion/react";function f(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,o)}return r}function u(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?f(Object(r),!0).forEach((function(e){b(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function b(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function d(){return(d=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o])}return n}).apply(this,arguments)}function g(n,e){if(null==n)return{};var r,o,t=function(n,e){if(null==n)return{};var r,o,t={},a=Object.keys(n);for(o=0;o<a.length;o++)r=a[o],e.indexOf(r)>=0||(t[r]=n[r]);return t}(n,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(o=0;o<a.length;o++)r=a[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(t[r]=n[r])}return t}function p(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var y,h,m,k,v,O,w,j,x,P,S,z,D,N,I,C,E=["size","darkMode","disabled","active","className","children"],L="light",M="dark",B={Default:"default",Large:"large",XLarge:"xlarge"},X=e(y||(y=p(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]))),R=e(h||(h=p(["\n  display: inline-block;\n  border-radius: 100px;\n  color: ",";\n  position: relative;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color 150ms ease-in-out;\n\n  // Set background to fully-transparent white for cross-browser compatability with Safari\n  //\n  // Safari treats \"transparent\" values in CSS as transparent black instead of white\n  // which can make things render differently across browsers if not defined explicitly.\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:active:before,\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])),i.gray.base),T=(b(O={},B.Default,e(m||(m=p(["\n    height: 28px;\n    width: 28px;\n  "])))),b(O,B.Large,e(k||(k=p(["\n    height: 35px;\n    width: 35px;\n  "])))),b(O,B.XLarge,e(v||(v=p(["\n    height: 42px;\n    width: 42px;\n  "])))),O),q=(b(x={},L,e(w||(w=p(["\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),i.gray.dark2,i.gray.light2,i.blue.dark2,i.blue.light2)),b(x,M,e(j||(j=p(["\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),i.white,i.gray.dark2,i.blue.light1,i.blue.dark2)),x),A=(b(z={},L,e(P||(P=p(["\n    color: ",";\n    pointer-events: none;\n    background-color: rgba(255, 255, 255, 0);\n\n    &:focus {\n      color: ",";\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),i.gray.light2,i.gray.light2,i.gray.light1)),b(z,M,e(S||(S=p(["\n    color: ",";\n    pointer-events: none;\n    background-color: rgba(255, 255, 255, 0);\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),i.gray.dark2,i.gray.dark2,i.gray.dark1)),z),F=(b(I={},L,e(D||(D=p(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),i.gray.dark2,i.gray.light2,i.gray.light2)),b(I,M,e(N||(N=p(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),i.white,i.gray.dark2,i.gray.dark2)),I),G=e(C||(C=p(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),H=n.forwardRef((function(e,o){var i,f,p=e.size,y=void 0===p?B.Default:p,h=e.darkMode,m=void 0!==h&&h,k=e.disabled,v=void 0!==k&&k,O=e.active,w=void 0!==O&&O,j=e.className,x=e.children,P=g(e,E),S=m?"dark":"light";c(P,"IconButton");var z=n.Children.map(x,(function(e){if(!e)return null;if(a(e,"Icon")||l(e)){var r=e.props,o=r.size,t=r.title,i={size:o||y};return"string"==typeof t&&0!==t.length||(i.title=!1),n.cloneElement(e,i)}return e})),D=u(u({},P),{},(b(f={ref:o,tabIndex:0},"aria-disabled",v),b(f,"href",v?void 0:P.href),b(f,"onClick",v?void 0:P.onClick),b(f,"className",r(X,R,T[y],q[S],(b(i={},F[S],w),b(i,A[S],v),i),j)),f));return"string"==typeof P.href?s(t,d({as:"a"},D),s("div",{className:G},z)):s(t,d({as:"button"},D),s("div",{className:G},z))}));H.displayName="IconButton",H.propTypes={darkMode:o.bool,size:o.oneOf(Object.values(B)),className:o.string,children:o.node,disabled:o.bool,href:o.string,active:o.bool};export default H;export{B as Size};
+import n from"react";import{css as r,cx as e}from"@leafygreen-ui/emotion";import o from"prop-types";import t from"@leafygreen-ui/box";import{isComponentType as a}from"@leafygreen-ui/lib";import{useUsingKeyboardContext as i}from"@leafygreen-ui/leafygreen-provider";import{palette as l,uiColors as c}from"@leafygreen-ui/palette";import{isComponentGlyph as s}from"@leafygreen-ui/icon";import{validateAriaLabelProps as f}from"@leafygreen-ui/a11y";import{jsx as b}from"@emotion/react";function u(n,r){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(n,r).enumerable}))),e.push.apply(e,o)}return e}function g(n){for(var r=1;r<arguments.length;r++){var e=null!=arguments[r]?arguments[r]:{};r%2?u(Object(e),!0).forEach((function(r){d(n,r,e[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):u(Object(e)).forEach((function(r){Object.defineProperty(n,r,Object.getOwnPropertyDescriptor(e,r))}))}return n}function d(n,r,e){return r in n?Object.defineProperty(n,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[r]=e,n}function p(){return(p=Object.assign||function(n){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n}).apply(this,arguments)}function y(n,r){if(null==n)return{};var e,o,t=function(n,r){if(null==n)return{};var e,o,t={},a=Object.keys(n);for(o=0;o<a.length;o++)e=a[o],r.indexOf(e)>=0||(t[e]=n[e]);return t}(n,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);for(o=0;o<a.length;o++)e=a[o],r.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(t[e]=n[e])}return t}function h(n,r){return r||(r=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(r)}}))}var m,k,v,O,w,j,x,P,S,z,D,N,I,C,E,L,M,B,X,K=["size","darkMode","disabled","active","className","children"],R="light",T="dark",q={Default:"default",Large:"large",XLarge:"xlarge"},A=r(m||(m=h(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]))),F=r(k||(k=h(["\n  display: inline-block;\n  border-radius: 100px;\n  position: relative;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: 150ms ease-in-out;\n  transition-property: color, box-shadow;\n\n  // Set background to fully-transparent white for cross-browser compatability with Safari\n  //\n  // Safari treats \"transparent\" values in CSS as transparent black instead of white\n  // which can make things render differently across browsers if not defined explicitly.\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:active:before,\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"]))),G=(d(j={},q.Default,r(v||(v=h(["\n    height: 28px;\n    width: 28px;\n  "])))),d(j,q.Large,r(O||(O=h(["\n    height: 36px;\n    width: 36px;\n  "])))),d(j,q.XLarge,r(w||(w=h(["\n    height: 42px;\n    width: 42px;\n  "])))),j),H=(d(S={},R,r(x||(x=h(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.gray.base,l.gray.dark3,l.gray.light2)),d(S,T,r(P||(P=h(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),c.gray.base,c.white,c.gray.dark2)),S),J=(d(N={},R,r(z||(z=h(["\n    &:focus {\n      color: ",";\n      box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.gray.dark3,l.white,l.blue.light1,l.gray.light2)),d(N,T,r(D||(D=h(["\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),c.blue.light1,c.blue.dark2)),N),Q=(d(E={},R,r(I||(I=h(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: rgba(255, 255, 255, 0);\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: rgba(255, 255, 255, 0);\n      }\n    }\n\n    &:focus {\n      color: ",";\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.gray.light1,l.gray.light1,l.gray.light1,l.gray.light3)),d(E,T,r(C||(C=h(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: rgba(255, 255, 255, 0);\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: rgba(255, 255, 255, 0);\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),c.gray.dark2,c.gray.dark2,c.gray.dark2,c.gray.dark1)),E),U=(d(B={},R,r(L||(L=h(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.gray.dark2,c.gray.light2,c.gray.light2)),d(B,T,r(M||(M=h(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),c.white,c.gray.dark2,c.gray.dark2)),B),V=r(X||(X=h(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),W=n.forwardRef((function(r,o){var l,c,u=r.size,h=void 0===u?q.Default:u,m=r.darkMode,k=void 0!==m&&m,v=r.disabled,O=void 0!==v&&v,w=r.active,j=void 0!==w&&w,x=r.className,P=r.children,S=y(r,K),z=k?"dark":"light",D=i().usingKeyboard;f(S,"IconButton");var N=n.Children.map(P,(function(r){if(!r)return null;if(a(r,"Icon")||s(r)){var e=r.props,o=e.size,t=e.title,i={size:o||h};return"string"==typeof t&&0!==t.length||(i.title=!1),n.cloneElement(r,i)}return r})),I=g(g({},S),{},(d(c={ref:o,tabIndex:0},"aria-disabled",O),d(c,"href",O?void 0:S.href),d(c,"onClick",O?void 0:S.onClick),d(c,"className",e(A,F,G[h],H[z],(d(l={},J[z],D),d(l,U[z],j),d(l,Q[z],O),l),x)),c));return"string"==typeof S.href?b(t,p({as:"a"},I),b("div",{className:V},N)):b(t,p({as:"button"},I),b("div",{className:V},N))}));W.displayName="IconButton",W.propTypes={darkMode:o.bool,size:o.oneOf(Object.values(q)),className:o.string,children:o.node,disabled:o.bool,href:o.string,active:o.bool};export default W;export{q as Size};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("prop-types"),require("@leafygreen-ui/box"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/a11y"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","prop-types","@leafygreen-ui/box","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/icon","@leafygreen-ui/a11y","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/icon-button"]={},e.React,e["@leafygreen-ui/emotion"],e.PropTypes,e["@leafygreen-ui/box"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/a11y"],e.react)}(this,(function(e,n,r,o,t,i,a,l,s,c){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=u(n),d=u(o),b=u(t);function g(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,o)}return r}function p(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?g(Object(r),!0).forEach((function(n){y(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function y(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function h(){return(h=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function v(e,n){if(null==e)return{};var r,o,t=function(e,n){if(null==e)return{};var r,o,t={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}function k(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var O,m,j,C,x,w,P,S,q,z,D,N,I,L,T,E,M=["size","darkMode","disabled","active","className","children"],B="light",R="dark",X={Default:"default",Large:"large",XLarge:"xlarge"},_=r.css(O||(O=k(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]))),A=r.css(m||(m=k(["\n  display: inline-block;\n  border-radius: 100px;\n  color: ",";\n  position: relative;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color 150ms ease-in-out;\n\n  // Set background to fully-transparent white for cross-browser compatability with Safari\n  //\n  // Safari treats \"transparent\" values in CSS as transparent black instead of white\n  // which can make things render differently across browsers if not defined explicitly.\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:active:before,\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])),a.uiColors.gray.base),G=(y(w={},X.Default,r.css(j||(j=k(["\n    height: 28px;\n    width: 28px;\n  "])))),y(w,X.Large,r.css(C||(C=k(["\n    height: 35px;\n    width: 35px;\n  "])))),y(w,X.XLarge,r.css(x||(x=k(["\n    height: 42px;\n    width: 42px;\n  "])))),w),F=(y(q={},B,r.css(P||(P=k(["\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),a.uiColors.gray.dark2,a.uiColors.gray.light2,a.uiColors.blue.dark2,a.uiColors.blue.light2)),y(q,R,r.css(S||(S=k(["\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),a.uiColors.white,a.uiColors.gray.dark2,a.uiColors.blue.light1,a.uiColors.blue.dark2)),q),H=(y(N={},B,r.css(z||(z=k(["\n    color: ",";\n    pointer-events: none;\n    background-color: rgba(255, 255, 255, 0);\n\n    &:focus {\n      color: ",";\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),a.uiColors.gray.light2,a.uiColors.gray.light2,a.uiColors.gray.light1)),y(N,R,r.css(D||(D=k(["\n    color: ",";\n    pointer-events: none;\n    background-color: rgba(255, 255, 255, 0);\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),a.uiColors.gray.dark2,a.uiColors.gray.dark2,a.uiColors.gray.dark1)),N),J=(y(T={},B,r.css(I||(I=k(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),a.uiColors.gray.dark2,a.uiColors.gray.light2,a.uiColors.gray.light2)),y(T,R,r.css(L||(L=k(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),a.uiColors.white,a.uiColors.gray.dark2,a.uiColors.gray.dark2)),T),K=r.css(E||(E=k(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),Q=f.default.forwardRef((function(e,n){var o,t,a=e.size,u=void 0===a?X.Default:a,d=e.darkMode,g=void 0!==d&&d,k=e.disabled,O=void 0!==k&&k,m=e.active,j=void 0!==m&&m,C=e.className,x=e.children,w=v(e,M),P=g?"dark":"light";s.validateAriaLabelProps(w,"IconButton");var S=f.default.Children.map(x,(function(e){if(!e)return null;if(i.isComponentType(e,"Icon")||l.isComponentGlyph(e)){var n=e.props,r=n.size,o=n.title,t={size:r||u};return"string"==typeof o&&0!==o.length||(t.title=!1),f.default.cloneElement(e,t)}return e})),q=p(p({},w),{},(y(t={ref:n,tabIndex:0},"aria-disabled",O),y(t,"href",O?void 0:w.href),y(t,"onClick",O?void 0:w.onClick),y(t,"className",r.cx(_,A,G[u],F[P],(y(o={},J[P],j),y(o,H[P],O),o),C)),t));return"string"==typeof w.href?c.jsx(b.default,h({as:"a"},q),c.jsx("div",{className:K},S)):c.jsx(b.default,h({as:"button"},q),c.jsx("div",{className:K},S))}));Q.displayName="IconButton",Q.propTypes={darkMode:d.default.bool,size:d.default.oneOf(Object.values(X)),className:d.default.string,children:d.default.node,disabled:d.default.bool,href:d.default.string,active:d.default.bool},e.Size=X,e.default=Q,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("prop-types"),require("@leafygreen-ui/box"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/a11y"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","prop-types","@leafygreen-ui/box","@leafygreen-ui/lib","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/palette","@leafygreen-ui/icon","@leafygreen-ui/a11y","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/icon-button"]={},e.React,e["@leafygreen-ui/emotion"],e.PropTypes,e["@leafygreen-ui/box"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/a11y"],e.react)}(this,(function(e,n,r,o,t,a,i,l,c,s,u){"use strict";function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=f(n),g=f(o),b=f(t);function p(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,o)}return r}function y(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?p(Object(r),!0).forEach((function(n){h(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function h(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function v(){return(v=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function k(e,n){if(null==e)return{};var r,o,t=function(e,n){if(null==e)return{};var r,o,t={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}function O(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var m,j,x,w,C,P,q,S,z,D,N,I,L,T,E,M,B,K,R,X=["size","darkMode","disabled","active","className","children"],_="light",A="dark",G={Default:"default",Large:"large",XLarge:"xlarge"},U=r.css(m||(m=O(["\n  border: none;\n  -webkit-appearance: unset;\n  padding: unset;\n"]))),F=r.css(j||(j=O(["\n  display: inline-block;\n  border-radius: 100px;\n  position: relative;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: 150ms ease-in-out;\n  transition-property: color, box-shadow;\n\n  // Set background to fully-transparent white for cross-browser compatability with Safari\n  //\n  // Safari treats \"transparent\" values in CSS as transparent black instead of white\n  // which can make things render differently across browsers if not defined explicitly.\n  background-color: rgba(255, 255, 255, 0);\n\n  &:before {\n    content: '';\n    transition: 150ms all ease-in-out;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 100%;\n    opacity: 0;\n    transform: scale(0.8);\n  }\n\n  &:active:before,\n  &:hover:before,\n  &:focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  &:focus {\n    outline: none;\n  }\n"]))),H=(h(P={},G.Default,r.css(x||(x=O(["\n    height: 28px;\n    width: 28px;\n  "])))),h(P,G.Large,r.css(w||(w=O(["\n    height: 36px;\n    width: 36px;\n  "])))),h(P,G.XLarge,r.css(C||(C=O(["\n    height: 42px;\n    width: 42px;\n  "])))),P),J=(h(z={},_,r.css(q||(q=O(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.palette.gray.base,l.palette.gray.dark3,l.palette.gray.light2)),h(z,A,r.css(S||(S=O(["\n    color: ",";\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.uiColors.gray.base,l.uiColors.white,l.uiColors.gray.dark2)),z),Q=(h(I={},_,r.css(D||(D=O(["\n    &:focus {\n      color: ",";\n      box-shadow: 0 0 0 2px ",", 0 0 0 4px ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.palette.gray.dark3,l.palette.white,l.palette.blue.light1,l.palette.gray.light2)),h(I,A,r.css(N||(N=O(["\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.uiColors.blue.light1,l.uiColors.blue.dark2)),I),V=(h(E={},_,r.css(L||(L=O(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: rgba(255, 255, 255, 0);\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: rgba(255, 255, 255, 0);\n      }\n    }\n\n    &:focus {\n      color: ",";\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.palette.gray.light1,l.palette.gray.light1,l.palette.gray.light1,l.palette.gray.light3)),h(E,A,r.css(T||(T=O(["\n    cursor: not-allowed;\n    color: ",";\n    background-color: rgba(255, 255, 255, 0);\n\n    &:active,\n    &:hover {\n      color: ",";\n\n      &:before {\n        background-color: rgba(255, 255, 255, 0);\n      }\n    }\n\n    &:focus {\n      color: ",";\n\n      &:before {\n        background-color: ",";\n      }\n    }\n  "])),l.uiColors.gray.dark2,l.uiColors.gray.dark2,l.uiColors.gray.dark2,l.uiColors.gray.dark1)),E),W=(h(K={},_,r.css(M||(M=O(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),l.uiColors.gray.dark2,l.uiColors.gray.light2,l.uiColors.gray.light2)),h(K,A,r.css(B||(B=O(["\n    color: ",";\n    background-color: ",";\n\n    &:before {\n      background-color: ",";\n    }\n  "])),l.uiColors.white,l.uiColors.gray.dark2,l.uiColors.gray.dark2)),K),Y=r.css(R||(R=O(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),Z=d.default.forwardRef((function(e,n){var o,t,l=e.size,f=void 0===l?G.Default:l,g=e.darkMode,p=void 0!==g&&g,O=e.disabled,m=void 0!==O&&O,j=e.active,x=void 0!==j&&j,w=e.className,C=e.children,P=k(e,X),q=p?"dark":"light",S=i.useUsingKeyboardContext().usingKeyboard;s.validateAriaLabelProps(P,"IconButton");var z=d.default.Children.map(C,(function(e){if(!e)return null;if(a.isComponentType(e,"Icon")||c.isComponentGlyph(e)){var n=e.props,r=n.size,o=n.title,t={size:r||f};return"string"==typeof o&&0!==o.length||(t.title=!1),d.default.cloneElement(e,t)}return e})),D=y(y({},P),{},(h(t={ref:n,tabIndex:0},"aria-disabled",m),h(t,"href",m?void 0:P.href),h(t,"onClick",m?void 0:P.onClick),h(t,"className",r.cx(U,F,H[f],J[q],(h(o={},Q[q],S),h(o,W[q],x),h(o,V[q],m),o),w)),t));return"string"==typeof P.href?u.jsx(b.default,v({as:"a"},D),u.jsx("div",{className:Y},z)):u.jsx(b.default,v({as:"button"},D),u.jsx("div",{className:Y},z))}));Z.displayName="IconButton",Z.propTypes={darkMode:g.default.bool,size:g.default.oneOf(Object.values(G)),className:g.default.string,children:g.default.node,disabled:g.default.bool,href:g.default.string,active:g.default.bool},e.Size=G,e.default=Z,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/icon-button",
-  "version": "9.1.7",
+  "version": "10.0.0",
   "description": "LeafyGreen UI Kit Icon Buttons",
@@ -30,4 +30,5 @@ "main": "./dist/index.js",
     "@leafygreen-ui/palette": "^3.2.2",
-    "@leafygreen-ui/box": "^3.0.6"
+    "@leafygreen-ui/box": "^3.0.6",
+    "@leafygreen-ui/leafygreen-provider": "^2.1.3"
   }
 }

tsconfig.json

@@ -27,4 +27,7 @@ {
       "path": "../a11y"
+    },
+    {
+      "path": "../leafygreen-provider"
     }
   ]
 }

No alert changes

Improved metrics

Total package byte prevSize

241137

increased by4.11%

Lines of code

520

increased by7.66%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@leafygreen-ui/leafygreen-provider@^2.1.3

• + Added@leafygreen-ui/hooks@7.7.8(transitive)

• + Added@leafygreen-ui/leafygreen-provider@2.3.5(transitive)