@leafygreen-ui/input-option - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

CHANGELOG.md

 # @leafygreen-ui/input-option
 
+## 2.0.2
+
+### Patch Changes
+
+- ecae9acc7: Updates `InputOptionContent` horizontal padding from 8px to 12px
+
 ## 2.0.1
@@ -4,0 +10,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{createContext as n,useContext as t}from"react";import{css as r,cx as i}from"@leafygreen-ui/emotion";import{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import{Polymorphic as a,usePolymorphic as l}from"@leafygreen-ui/polymorphic";import{createUniqueClassName as s}from"@leafygreen-ui/lib";import{palette as d}from"@leafygreen-ui/palette";import{spacing as c,Variant as h,State as p,color as u,transitionDuration as f,InteractionState as g,typeScales as m,fontFamilies as y}from"@leafygreen-ui/tokens";import{Description as b}from"@leafygreen-ui/typography";function v(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function x(){return x=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(this,arguments)}function k(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}function w(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var O,j,I,N,E,P,G,S,z,M,_,D,Y,F=n({}),H=s("input_option-content"),L=s("input_option-title"),C=s("input_option-description"),R=s("input_option-left-glyph"),W=function(e){var n=e.hasLeftGlyph?"left-glyph":"text",t=e.hasRightGlyph?"right-glyph":"text";return r(O||(O=w(["\n    display: grid;\n    grid-template-columns: ","px 1fr ","px;\n    grid-template-areas: '"," text ","';\n    gap: ","px;\n    align-items: center;\n    width: 100%;\n  "])),c[400],c[400],n,t,c[200])},T=function(e){var n=e.theme,t=e.disabled,i=e.highlighted,o=t?h.Disabled:h.Primary,a=i?p.Focus:p.Default;return r(j||(j=w(["\n    grid-area: left-glyph;\n    display: flex;\n    align-items: center;\n    // Hover styles set by parent InputOption\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),u[n].icon[o][a],f.default)},q=function(e){var n=e.theme,t=e.disabled?h.Disabled:h.Primary;return r(I||(I=w(["\n    grid-area: right-glyph;\n    display: flex;\n    align-items: center;\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),u[n].icon[t].default,f.default)},A=r(N||(N=w(["\n  grid-area: text;\n  line-height: ","px;\n"])),c[400]),B=function(e){var n=e.theme,t=e.highlighted,i=e.disabled;return r(E||(E=w(["\n  overflow-wrap: anywhere;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: normal;\n  transition: color ","ms ease-in-out;\n\n  ","\n"])),f.default,t&&!i&&r(P||(P=w(["\n    font-weight: bold;\n    color: ",";\n  "])),u[n].text.primary.focus))},J=["children","description","leftGlyph","rightGlyph","preserveIconSpace","className"],K=function(n){var a=n.children,l=n.description,s=n.leftGlyph,d=n.rightGlyph,h=n.preserveIconSpace,p=void 0===h||h,u=n.className,g=k(n,J),m=t(F),y=m.disabled,v=m.highlighted,O=m.darkMode,j=o(O).theme;return e.createElement("div",x({className:i(H,W({hasLeftGlyph:!!s||p,hasRightGlyph:!!d}),u)},g),s&&e.createElement("div",{className:i(R,T({theme:j,disabled:y,highlighted:v}))},s),e.createElement("div",{className:A},e.createElement("div",{className:i(L,B({theme:j,highlighted:v,disabled:y}))},a),l&&e.createElement(b,{darkMode:O,disabled:y,className:i(C,r(G||(G=w(["\n    max-height: ","px;\n    overflow: hidden;\n    font-size: inherit;\n    line-height: inherit;\n    text-overflow: ellipsis;\n    transition: color ","ms ease-in-out;\n  "])),c[1200],f.default))},l)),d&&e.createElement("div",{className:q({theme:j,disabled:y})},d))};K.displayName="InputOptionContent";var Q=s("input_option"),U=function(e){var n=e.theme,t=e.disabled,i=e.highlighted,o=e.isInteractive,a=i?g.Focus:g.Default;return r(S||(S=w(["\n    display: block;\n    position: relative;\n    list-style: none;\n    outline: none;\n    border: unset;\n    margin: 0;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n\n    font-size: ","px;\n    line-height: ","px;\n    font-family: ",";\n    padding: ","px ","px;\n\n    transition: ","ms ease-in-out;\n    transition-property: background-color, color;\n\n    color: ",";\n    background-color: ",";\n\n    ","\n\n    /* Interactive states */\n    ","\n  "])),m.body1.fontSize,m.body1.lineHeight,y.default,c[200],c[300],f.default,u[n].text.primary[a],u[n].background.primary[a],t&&r(z||(z=w(["\n      cursor: not-allowed;\n      color: ",";\n    "])),u[n].text.disabled[a]),o&&!t&&r(M||(M=w(["\n      /* Hover */\n      &:hover {\n        outline: none;\n        color: ",";\n        background-color: ",";\n\n        ."," {\n          color: ",";\n        }\n\n        ."," {\n          color: ",";\n        }\n      }\n\n      /* Focus (majority of styling handled by the 'highlighted' prop) */\n      &:focus {\n        outline: none;\n        border: unset;\n      }\n    "])),u[n].text.primary.hover,u[n].background.primary.hover,L,u[n].text.primary.hover,R,u[n].icon.primary.hover))},V=c[100],X=c[200],Z=function(e){var n=e.disabled,t=e.highlighted;return r(_||(_=w(["\n  // Left wedge\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: ","px;\n    height: calc(100% - ","px);\n    min-height: ","px;\n    background-color: rgba(255, 255, 255, 0);\n    border-radius: 0 6px 6px 0;\n    transform: scale3d(0, 0.3, 0) translateY(-50%);\n    transform-origin: 0%; // 0% since we use translateY\n    transition: ","ms ease-in-out;\n    transition-property: transform, background-color;\n\n    ","\n\n    ","\n  }\n"])),V,2*X,c[600],f.default,t&&r(D||(D=w(["\n      transform: scaleY(1) translateY(-50%);\n      background-color: ",";\n    "])),d.blue.base),n&&r(Y||(Y=w(["\n      content: unset;\n    "]))))},$=["as","children","disabled","highlighted","checked","darkMode","showWedge","isInteractive","className"],ee=a((function(n,t){var r,a,s,d=n.as,c=void 0===d?"li":d,h=n.children,p=n.disabled,u=n.highlighted,f=n.checked,g=n.darkMode,m=n.showWedge,y=void 0===m||m,b=n.isInteractive,w=void 0===b||b,O=n.className,j=k(n,$),I=l(c).Component,N=o(g),E=N.theme,P=N.darkMode;return e.createElement(F.Provider,{value:{checked:f,darkMode:P,disabled:p,highlighted:u}},e.createElement(I,x({ref:t,role:"option","aria-selected":u,"aria-checked":f,"aria-disabled":p,tabIndex:-1,className:i(Q,U({theme:E,disabled:p,highlighted:u,isInteractive:w}),(r={},a=Z({theme:E,disabled:p,highlighted:u,isInteractive:w}),s=y,(a=v(a))in r?Object.defineProperty(r,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):r[a]=s,r),O)},j),h))}));ee.displayName="InputOption";export{ee as InputOption,K as InputOptionContent,C as descriptionClassName,Q as inputOptionClassName,H as inputOptionContentClassName,R as leftGlyphClassName,L as titleClassName};
+import e,{createContext as n,useContext as t}from"react";import{css as r,cx as i}from"@leafygreen-ui/emotion";import{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import{Polymorphic as a,usePolymorphic as l}from"@leafygreen-ui/polymorphic";import{createUniqueClassName as s}from"@leafygreen-ui/lib";import{palette as d}from"@leafygreen-ui/palette";import{spacing as c,Variant as h,State as p,color as u,transitionDuration as f,InteractionState as g,typeScales as m,fontFamilies as y}from"@leafygreen-ui/tokens";import{Description as b}from"@leafygreen-ui/typography";function v(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function x(){return x=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(this,arguments)}function k(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}function w(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var O,j,I,N,E,P,G,S,z,M,_,D,Y,F=n({}),H=s("input_option-content"),L=s("input_option-title"),C=s("input_option-description"),R=s("input_option-left-glyph"),W=function(e){var n=e.hasLeftGlyph?"left-glyph":"text",t=e.hasRightGlyph?"right-glyph":"text";return r(O||(O=w(["\n    display: grid;\n    grid-template-columns: ","px 1fr ","px;\n    grid-template-areas: '"," text ","';\n    gap: ","px;\n    align-items: center;\n    width: 100%;\n  "])),c[400],c[400],n,t,c[200])},T=function(e){var n=e.theme,t=e.disabled,i=e.highlighted,o=t?h.Disabled:h.Primary,a=i?p.Focus:p.Default;return r(j||(j=w(["\n    grid-area: left-glyph;\n    display: flex;\n    align-items: center;\n    // Hover styles set by parent InputOption\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),u[n].icon[o][a],f.default)},q=function(e){var n=e.theme,t=e.disabled?h.Disabled:h.Primary;return r(I||(I=w(["\n    grid-area: right-glyph;\n    display: flex;\n    align-items: center;\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),u[n].icon[t].default,f.default)},A=r(N||(N=w(["\n  grid-area: text;\n  line-height: ","px;\n"])),c[400]),B=function(e){var n=e.theme,t=e.highlighted,i=e.disabled;return r(E||(E=w(["\n  overflow-wrap: anywhere;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: normal;\n  transition: color ","ms ease-in-out;\n\n  ","\n"])),f.default,t&&!i&&r(P||(P=w(["\n    font-weight: bold;\n    color: ",";\n  "])),u[n].text.primary.focus))},J=["children","description","leftGlyph","rightGlyph","preserveIconSpace","className"],K=function(n){var a=n.children,l=n.description,s=n.leftGlyph,d=n.rightGlyph,h=n.preserveIconSpace,p=void 0===h||h,u=n.className,g=k(n,J),m=t(F),y=m.disabled,v=m.highlighted,O=m.darkMode,j=o(O).theme;return e.createElement("div",x({className:i(H,W({hasLeftGlyph:!!s||p,hasRightGlyph:!!d}),u)},g),s&&e.createElement("div",{className:i(R,T({theme:j,disabled:y,highlighted:v}))},s),e.createElement("div",{className:A},e.createElement("div",{className:i(L,B({theme:j,highlighted:v,disabled:y}))},a),l&&e.createElement(b,{darkMode:O,disabled:y,className:i(C,r(G||(G=w(["\n    max-height: ","px;\n    overflow: hidden;\n    font-size: inherit;\n    line-height: inherit;\n    text-overflow: ellipsis;\n    transition: color ","ms ease-in-out;\n  "])),c[1200],f.default))},l)),d&&e.createElement("div",{className:q({theme:j,disabled:y})},d))};K.displayName="InputOptionContent";var Q=s("input_option"),U=function(e){var n=e.theme,t=e.disabled,i=e.highlighted,o=e.isInteractive,a=i?g.Focus:g.Default;return r(S||(S=w(["\n    display: block;\n    position: relative;\n    list-style: none;\n    outline: none;\n    border: unset;\n    margin: 0;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n\n    font-size: ","px;\n    line-height: ","px;\n    font-family: ",";\n    padding: ","px ","px;\n\n    transition: ","ms ease-in-out;\n    transition-property: background-color, color;\n\n    color: ",";\n    background-color: ",";\n\n    ","\n\n    /* Interactive states */\n    ","\n  "])),m.body1.fontSize,m.body1.lineHeight,y.default,c[300],c[300],f.default,u[n].text.primary[a],u[n].background.primary[a],t&&r(z||(z=w(["\n      cursor: not-allowed;\n      color: ",";\n    "])),u[n].text.disabled[a]),o&&!t&&r(M||(M=w(["\n      /* Hover */\n      &:hover {\n        outline: none;\n        color: ",";\n        background-color: ",";\n\n        ."," {\n          color: ",";\n        }\n\n        ."," {\n          color: ",";\n        }\n      }\n\n      /* Focus (majority of styling handled by the 'highlighted' prop) */\n      &:focus {\n        outline: none;\n        border: unset;\n      }\n    "])),u[n].text.primary.hover,u[n].background.primary.hover,L,u[n].text.primary.hover,R,u[n].icon.primary.hover))},V=c[100],X=c[200],Z=function(e){var n=e.disabled,t=e.highlighted;return r(_||(_=w(["\n  // Left wedge\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: ","px;\n    height: calc(100% - ","px);\n    min-height: ","px;\n    background-color: rgba(255, 255, 255, 0);\n    border-radius: 0 6px 6px 0;\n    transform: scale3d(0, 0.3, 0) translateY(-50%);\n    transform-origin: 0%; // 0% since we use translateY\n    transition: ","ms ease-in-out;\n    transition-property: transform, background-color;\n\n    ","\n\n    ","\n  }\n"])),V,2*X,c[600],f.default,t&&r(D||(D=w(["\n      transform: scaleY(1) translateY(-50%);\n      background-color: ",";\n    "])),d.blue.base),n&&r(Y||(Y=w(["\n      content: unset;\n    "]))))},$=["as","children","disabled","highlighted","checked","darkMode","showWedge","isInteractive","className"],ee=a((function(n,t){var r,a,s,d=n.as,c=void 0===d?"li":d,h=n.children,p=n.disabled,u=n.highlighted,f=n.checked,g=n.darkMode,m=n.showWedge,y=void 0===m||m,b=n.isInteractive,w=void 0===b||b,O=n.className,j=k(n,$),I=l(c).Component,N=o(g),E=N.theme,P=N.darkMode;return e.createElement(F.Provider,{value:{checked:f,darkMode:P,disabled:p,highlighted:u}},e.createElement(I,x({ref:t,role:"option","aria-selected":u,"aria-checked":f,"aria-disabled":p,tabIndex:-1,className:i(Q,U({theme:E,disabled:p,highlighted:u,isInteractive:w}),(r={},a=Z({theme:E,disabled:p,highlighted:u,isInteractive:w}),s=y,(a=v(a))in r?Object.defineProperty(r,a,{value:s,enumerable:!0,configurable:!0,writable:!0}):r[a]=s,r),O)},j),h))}));ee.displayName="InputOption";export{ee as InputOption,K as InputOptionContent,C as descriptionClassName,Q as inputOptionClassName,H as inputOptionContentClassName,R as leftGlyphClassName,L as titleClassName};
 //# 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("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/polymorphic"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/polymorphic","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/typography"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/input-option"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/polymorphic"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"])}(this,(function(e,n,t,i,r,a,o,l,s){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(n);function u(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},p.apply(this,arguments)}function h(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}function f(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var g,y,m,b,v,x,k,N,O,w,I,j,C,q=n.createContext({}),D=a.createUniqueClassName("input_option-content"),S=a.createUniqueClassName("input_option-title"),P=a.createUniqueClassName("input_option-description"),E=a.createUniqueClassName("input_option-left-glyph"),G=function(e){var n=e.hasLeftGlyph?"left-glyph":"text",i=e.hasRightGlyph?"right-glyph":"text";return t.css(g||(g=f(["\n    display: grid;\n    grid-template-columns: ","px 1fr ","px;\n    grid-template-areas: '"," text ","';\n    gap: ","px;\n    align-items: center;\n    width: 100%;\n  "])),l.spacing[400],l.spacing[400],n,i,l.spacing[200])},M=function(e){var n=e.theme,i=e.disabled,r=e.highlighted,a=i?l.Variant.Disabled:l.Variant.Primary,o=r?l.State.Focus:l.State.Default;return t.css(y||(y=f(["\n    grid-area: left-glyph;\n    display: flex;\n    align-items: center;\n    // Hover styles set by parent InputOption\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),l.color[n].icon[a][o],l.transitionDuration.default)},z=function(e){var n=e.theme,i=e.disabled?l.Variant.Disabled:l.Variant.Primary;return t.css(m||(m=f(["\n    grid-area: right-glyph;\n    display: flex;\n    align-items: center;\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),l.color[n].icon[i].default,l.transitionDuration.default)},U=t.css(b||(b=f(["\n  grid-area: text;\n  line-height: ","px;\n"])),l.spacing[400]),_=function(e){var n=e.theme,i=e.highlighted,r=e.disabled;return t.css(v||(v=f(["\n  overflow-wrap: anywhere;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: normal;\n  transition: color ","ms ease-in-out;\n\n  ","\n"])),l.transitionDuration.default,i&&!r&&t.css(x||(x=f(["\n    font-weight: bold;\n    color: ",";\n  "])),l.color[n].text.primary.focus))},F=["children","description","leftGlyph","rightGlyph","preserveIconSpace","className"],V=function(e){var r=e.children,a=e.description,o=e.leftGlyph,c=e.rightGlyph,u=e.preserveIconSpace,g=void 0===u||u,y=e.className,m=h(e,F),b=n.useContext(q),v=b.disabled,x=b.highlighted,N=b.darkMode,O=i.useDarkMode(N).theme;return d.default.createElement("div",p({className:t.cx(D,G({hasLeftGlyph:!!o||g,hasRightGlyph:!!c}),y)},m),o&&d.default.createElement("div",{className:t.cx(E,M({theme:O,disabled:v,highlighted:x}))},o),d.default.createElement("div",{className:U},d.default.createElement("div",{className:t.cx(S,_({theme:O,highlighted:x,disabled:v}))},r),a&&d.default.createElement(s.Description,{darkMode:N,disabled:v,className:t.cx(P,t.css(k||(k=f(["\n    max-height: ","px;\n    overflow: hidden;\n    font-size: inherit;\n    line-height: inherit;\n    text-overflow: ellipsis;\n    transition: color ","ms ease-in-out;\n  "])),l.spacing[1200],l.transitionDuration.default))},a)),c&&d.default.createElement("div",{className:z({theme:O,disabled:v})},c))};V.displayName="InputOptionContent";var Y=a.createUniqueClassName("input_option"),H=function(e){var n=e.theme,i=e.disabled,r=e.highlighted,a=e.isInteractive,o=r?l.InteractionState.Focus:l.InteractionState.Default;return t.css(N||(N=f(["\n    display: block;\n    position: relative;\n    list-style: none;\n    outline: none;\n    border: unset;\n    margin: 0;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n\n    font-size: ","px;\n    line-height: ","px;\n    font-family: ",";\n    padding: ","px ","px;\n\n    transition: ","ms ease-in-out;\n    transition-property: background-color, color;\n\n    color: ",";\n    background-color: ",";\n\n    ","\n\n    /* Interactive states */\n    ","\n  "])),l.typeScales.body1.fontSize,l.typeScales.body1.lineHeight,l.fontFamilies.default,l.spacing[200],l.spacing[300],l.transitionDuration.default,l.color[n].text.primary[o],l.color[n].background.primary[o],i&&t.css(O||(O=f(["\n      cursor: not-allowed;\n      color: ",";\n    "])),l.color[n].text.disabled[o]),a&&!i&&t.css(w||(w=f(["\n      /* Hover */\n      &:hover {\n        outline: none;\n        color: ",";\n        background-color: ",";\n\n        ."," {\n          color: ",";\n        }\n\n        ."," {\n          color: ",";\n        }\n      }\n\n      /* Focus (majority of styling handled by the 'highlighted' prop) */\n      &:focus {\n        outline: none;\n        border: unset;\n      }\n    "])),l.color[n].text.primary.hover,l.color[n].background.primary.hover,S,l.color[n].text.primary.hover,E,l.color[n].icon.primary.hover))},L=l.spacing[100],R=l.spacing[200],T=function(e){var n=e.disabled,i=e.highlighted;return t.css(I||(I=f(["\n  // Left wedge\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: ","px;\n    height: calc(100% - ","px);\n    min-height: ","px;\n    background-color: rgba(255, 255, 255, 0);\n    border-radius: 0 6px 6px 0;\n    transform: scale3d(0, 0.3, 0) translateY(-50%);\n    transform-origin: 0%; // 0% since we use translateY\n    transition: ","ms ease-in-out;\n    transition-property: transform, background-color;\n\n    ","\n\n    ","\n  }\n"])),L,2*R,l.spacing[600],l.transitionDuration.default,i&&t.css(j||(j=f(["\n      transform: scaleY(1) translateY(-50%);\n      background-color: ",";\n    "])),o.palette.blue.base),n&&t.css(C||(C=f(["\n      content: unset;\n    "]))))},W=["as","children","disabled","highlighted","checked","darkMode","showWedge","isInteractive","className"],A=r.Polymorphic((function(e,n){var a,o,l,s=e.as,c=void 0===s?"li":s,f=e.children,g=e.disabled,y=e.highlighted,m=e.checked,b=e.darkMode,v=e.showWedge,x=void 0===v||v,k=e.isInteractive,N=void 0===k||k,O=e.className,w=h(e,W),I=r.usePolymorphic(c).Component,j=i.useDarkMode(b),C=j.theme,D=j.darkMode;return d.default.createElement(q.Provider,{value:{checked:m,darkMode:D,disabled:g,highlighted:y}},d.default.createElement(I,p({ref:n,role:"option","aria-selected":y,"aria-checked":m,"aria-disabled":g,tabIndex:-1,className:t.cx(Y,H({theme:C,disabled:g,highlighted:y,isInteractive:N}),(a={},o=T({theme:C,disabled:g,highlighted:y,isInteractive:N}),l=x,(o=u(o))in a?Object.defineProperty(a,o,{value:l,enumerable:!0,configurable:!0,writable:!0}):a[o]=l,a),O)},w),f))}));A.displayName="InputOption",e.InputOption=A,e.InputOptionContent=V,e.descriptionClassName=P,e.inputOptionClassName=Y,e.inputOptionContentClassName=D,e.leftGlyphClassName=E,e.titleClassName=S}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/polymorphic"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/polymorphic","@leafygreen-ui/lib","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/typography"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/input-option"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/polymorphic"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"])}(this,(function(e,n,t,i,r,a,o,l,s){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(n);function u(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n);if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},p.apply(this,arguments)}function h(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}function f(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var g,y,m,b,v,x,k,N,O,w,I,j,C,q=n.createContext({}),D=a.createUniqueClassName("input_option-content"),S=a.createUniqueClassName("input_option-title"),P=a.createUniqueClassName("input_option-description"),E=a.createUniqueClassName("input_option-left-glyph"),G=function(e){var n=e.hasLeftGlyph?"left-glyph":"text",i=e.hasRightGlyph?"right-glyph":"text";return t.css(g||(g=f(["\n    display: grid;\n    grid-template-columns: ","px 1fr ","px;\n    grid-template-areas: '"," text ","';\n    gap: ","px;\n    align-items: center;\n    width: 100%;\n  "])),l.spacing[400],l.spacing[400],n,i,l.spacing[200])},M=function(e){var n=e.theme,i=e.disabled,r=e.highlighted,a=i?l.Variant.Disabled:l.Variant.Primary,o=r?l.State.Focus:l.State.Default;return t.css(y||(y=f(["\n    grid-area: left-glyph;\n    display: flex;\n    align-items: center;\n    // Hover styles set by parent InputOption\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),l.color[n].icon[a][o],l.transitionDuration.default)},z=function(e){var n=e.theme,i=e.disabled?l.Variant.Disabled:l.Variant.Primary;return t.css(m||(m=f(["\n    grid-area: right-glyph;\n    display: flex;\n    align-items: center;\n    color: ",";\n    transition: color ","ms ease-in-out;\n  "])),l.color[n].icon[i].default,l.transitionDuration.default)},U=t.css(b||(b=f(["\n  grid-area: text;\n  line-height: ","px;\n"])),l.spacing[400]),_=function(e){var n=e.theme,i=e.highlighted,r=e.disabled;return t.css(v||(v=f(["\n  overflow-wrap: anywhere;\n  font-size: inherit;\n  line-height: inherit;\n  font-weight: normal;\n  transition: color ","ms ease-in-out;\n\n  ","\n"])),l.transitionDuration.default,i&&!r&&t.css(x||(x=f(["\n    font-weight: bold;\n    color: ",";\n  "])),l.color[n].text.primary.focus))},F=["children","description","leftGlyph","rightGlyph","preserveIconSpace","className"],V=function(e){var r=e.children,a=e.description,o=e.leftGlyph,c=e.rightGlyph,u=e.preserveIconSpace,g=void 0===u||u,y=e.className,m=h(e,F),b=n.useContext(q),v=b.disabled,x=b.highlighted,N=b.darkMode,O=i.useDarkMode(N).theme;return d.default.createElement("div",p({className:t.cx(D,G({hasLeftGlyph:!!o||g,hasRightGlyph:!!c}),y)},m),o&&d.default.createElement("div",{className:t.cx(E,M({theme:O,disabled:v,highlighted:x}))},o),d.default.createElement("div",{className:U},d.default.createElement("div",{className:t.cx(S,_({theme:O,highlighted:x,disabled:v}))},r),a&&d.default.createElement(s.Description,{darkMode:N,disabled:v,className:t.cx(P,t.css(k||(k=f(["\n    max-height: ","px;\n    overflow: hidden;\n    font-size: inherit;\n    line-height: inherit;\n    text-overflow: ellipsis;\n    transition: color ","ms ease-in-out;\n  "])),l.spacing[1200],l.transitionDuration.default))},a)),c&&d.default.createElement("div",{className:z({theme:O,disabled:v})},c))};V.displayName="InputOptionContent";var Y=a.createUniqueClassName("input_option"),H=function(e){var n=e.theme,i=e.disabled,r=e.highlighted,a=e.isInteractive,o=r?l.InteractionState.Focus:l.InteractionState.Default;return t.css(N||(N=f(["\n    display: block;\n    position: relative;\n    list-style: none;\n    outline: none;\n    border: unset;\n    margin: 0;\n    text-align: left;\n    text-decoration: none;\n    cursor: pointer;\n\n    font-size: ","px;\n    line-height: ","px;\n    font-family: ",";\n    padding: ","px ","px;\n\n    transition: ","ms ease-in-out;\n    transition-property: background-color, color;\n\n    color: ",";\n    background-color: ",";\n\n    ","\n\n    /* Interactive states */\n    ","\n  "])),l.typeScales.body1.fontSize,l.typeScales.body1.lineHeight,l.fontFamilies.default,l.spacing[300],l.spacing[300],l.transitionDuration.default,l.color[n].text.primary[o],l.color[n].background.primary[o],i&&t.css(O||(O=f(["\n      cursor: not-allowed;\n      color: ",";\n    "])),l.color[n].text.disabled[o]),a&&!i&&t.css(w||(w=f(["\n      /* Hover */\n      &:hover {\n        outline: none;\n        color: ",";\n        background-color: ",";\n\n        ."," {\n          color: ",";\n        }\n\n        ."," {\n          color: ",";\n        }\n      }\n\n      /* Focus (majority of styling handled by the 'highlighted' prop) */\n      &:focus {\n        outline: none;\n        border: unset;\n      }\n    "])),l.color[n].text.primary.hover,l.color[n].background.primary.hover,S,l.color[n].text.primary.hover,E,l.color[n].icon.primary.hover))},L=l.spacing[100],R=l.spacing[200],T=function(e){var n=e.disabled,i=e.highlighted;return t.css(I||(I=f(["\n  // Left wedge\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    width: ","px;\n    height: calc(100% - ","px);\n    min-height: ","px;\n    background-color: rgba(255, 255, 255, 0);\n    border-radius: 0 6px 6px 0;\n    transform: scale3d(0, 0.3, 0) translateY(-50%);\n    transform-origin: 0%; // 0% since we use translateY\n    transition: ","ms ease-in-out;\n    transition-property: transform, background-color;\n\n    ","\n\n    ","\n  }\n"])),L,2*R,l.spacing[600],l.transitionDuration.default,i&&t.css(j||(j=f(["\n      transform: scaleY(1) translateY(-50%);\n      background-color: ",";\n    "])),o.palette.blue.base),n&&t.css(C||(C=f(["\n      content: unset;\n    "]))))},W=["as","children","disabled","highlighted","checked","darkMode","showWedge","isInteractive","className"],A=r.Polymorphic((function(e,n){var a,o,l,s=e.as,c=void 0===s?"li":s,f=e.children,g=e.disabled,y=e.highlighted,m=e.checked,b=e.darkMode,v=e.showWedge,x=void 0===v||v,k=e.isInteractive,N=void 0===k||k,O=e.className,w=h(e,W),I=r.usePolymorphic(c).Component,j=i.useDarkMode(b),C=j.theme,D=j.darkMode;return d.default.createElement(q.Provider,{value:{checked:m,darkMode:D,disabled:g,highlighted:y}},d.default.createElement(I,p({ref:n,role:"option","aria-selected":y,"aria-checked":m,"aria-disabled":g,tabIndex:-1,className:t.cx(Y,H({theme:C,disabled:g,highlighted:y,isInteractive:N}),(a={},o=T({theme:C,disabled:g,highlighted:y,isInteractive:N}),l=x,(o=u(o))in a?Object.defineProperty(a,o,{value:l,enumerable:!0,configurable:!0,writable:!0}):a[o]=l,a),O)},w),f))}));A.displayName="InputOption",e.InputOption=A,e.InputOptionContent=V,e.descriptionClassName=P,e.inputOptionClassName=Y,e.inputOptionContentClassName=D,e.leftGlyphClassName=E,e.titleClassName=S}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/input-option",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "leafyGreen UI Kit Internal Input Option",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/InputOption/InputOption.style.ts

@@ -47,3 +47,3 @@ import { css } from '@leafygreen-ui/emotion';
     font-family: ${fontFamilies.default};
-    padding: ${spacing[200]}px ${spacing[300]}px;
+    padding: ${spacing[300]}px ${spacing[300]}px;
 
@@ -50,0 +50,0 @@ transition: ${transitionDuration.default}ms ease-in-out;

No alert changes

Improved metrics

Total package byte prevSize

111248

increased by0.1%

No dependency changes