@flodesk/grain 5.16.6 → 5.17.0

package/es/components/icon-toggle.js

@@ -26,18 +26,18 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
 } : {
   target: "e9umpvt1",
   label: "Wrapper"
-})("display:flex;", getBorder('all'), ";border-radius:var(--grn-radius-s);width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvaWNvbi10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Qm9yZGVyLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMsIGNvbXBvbmVudFZhcnMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCB3aWR0aCA9IGBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSArIDJweClgO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgJHtnZXRCb3JkZXIoJ2FsbCcpfTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgYm9yZGVyOiBub25lO1xuICAke2dldEJvcmRlcignbGVmdCcpfTtcbiAgcGFkZGluZzogMDtcbiAgbWluLXdpZHRoOiAke3dpZHRofTtcbiAgaGVpZ2h0OiBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSAtIDJweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgdHJhbnNpdGlvbjogY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuXG4gICR7cCA9PlxuICAgIHAuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgYH07XG5cbiAgJiArIC5JY29uVG9nZ2xlIHtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1jb2xvci1ib3JkZXIpO1xuICB9XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgICR7cCA9PiBwLmlzQWN0aXZlICYmIGBib3gtc2hhZG93OiAwIDAgMCAxcHggdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KWB9O1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBtaW4td2lkdGg6IGNhbGMoJHt3aWR0aH0gLSAxcHgpO1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlOmFmdGVyIHtcbiAgICB3aWR0aDogY2FsYygxMDAlICsgMXB4KTtcbiAgICBsZWZ0OiAtMXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcykgMCAwIHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIH1cblxuICAmOmxhc3QtY2hpbGQ6YWZ0ZXIge1xuICAgIGJvcmRlci1yYWRpdXM6IDAgdmFyKC0tZ3JuLXJhZGl1cy1zKSB2YXIoLS1ncm4tcmFkaXVzLXMpIDA7XG4gIH1cblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvblRvZ2dsZSA9ICh7IGNoaWxkcmVuLCBpY29uLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxJdGVtV3JhcHBlciBjbGFzc05hbWU9XCJJY29uVG9nZ2xlXCIgaXNBY3RpdmU9e2lzQWN0aXZlfSBvbkNsaWNrPXtvbkNsaWNrfSB7Li4ucHJvcHN9PlxuICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gY29sb3I9XCJjdXJyZW50Q29sb3JcIiAvPn1cbiAgICAgIHtjaGlsZHJlbiAmJiBjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IEljb25Ub2dnbGVHcm91cCA9ICh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9KSA9PiA8V3JhcHBlciB7Li4ucHJvcHN9PntjaGlsZHJlbn08L1dyYXBwZXI+O1xuXG5JY29uVG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG59O1xuXG5JY29uVG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiB0eXBlcy5pY29uLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
+})("display:flex;", getBorder('all'), ";border-radius:var(--grn-radius-s);width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvaWNvbi10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Qm9yZGVyLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMsIGNvbXBvbmVudFZhcnMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCB3aWR0aCA9IGBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSArIDJweClgO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgJHtnZXRCb3JkZXIoJ2FsbCcpfTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuICBwYWRkaW5nOiAwO1xuICBtaW4td2lkdGg6ICR7d2lkdGh9O1xuICBoZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gMnB4KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG5cbiAgJHtwID0+XG4gICAgcC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICBgfTtcblxuICAmICsgLkljb25Ub2dnbGUge1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWJvcmRlcik7XG4gIH1cblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiAwO1xuICAgIGxlZnQ6IDA7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG4gICAgJHtwID0+IHAuaXNBY3RpdmUgJiYgYGJveC1zaGFkb3c6IDAgMCAwIDFweCAke2NvbXBvbmVudFZhcnMuYWN0aXZlQm9yZGVyQ29sb3J9YH07XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgIG1pbi13aWR0aDogY2FsYygke3dpZHRofSAtIDFweCk7XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGU6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgKyAxcHgpO1xuICAgIGxlZnQ6IC0xcHg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKSAwIDAgdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgfVxuXG4gICY6bGFzdC1jaGlsZDphZnRlciB7XG4gICAgYm9yZGVyLXJhZGl1czogMCB2YXIoLS1ncm4tcmFkaXVzLXMpIHZhcigtLWdybi1yYWRpdXMtcykgMDtcbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBJY29uVG9nZ2xlID0gKHsgY2hpbGRyZW4sIGljb24sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyIGNsYXNzTmFtZT1cIkljb25Ub2dnbGVcIiBpc0FjdGl2ZT17aXNBY3RpdmV9IG9uQ2xpY2s9e29uQ2xpY2t9IHsuLi5wcm9wc30+XG4gICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSBjb2xvcj1cImN1cnJlbnRDb2xvclwiIC8+fVxuICAgICAge2NoaWxkcmVuICYmIGNoaWxkcmVufVxuICAgIDwvSXRlbVdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgSWNvblRvZ2dsZUdyb3VwID0gKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0pID0+IDxXcmFwcGVyIHsuLi5wcm9wc30+e2NoaWxkcmVufTwvV3JhcHBlcj47XG5cbkljb25Ub2dnbGVHcm91cC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbkljb25Ub2dnbGUucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IHR5cGVzLmljb24sXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */"));
 
 var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "e9umpvt0"
 } : {
   target: "e9umpvt0",
   label: "ItemWrapper"
-})(styles.buttonReset, ";border:none;", getBorder('left'), ";padding:0;min-width:", width, ";height:calc(", componentVars.textBoxHeight, " - 2px);background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;color:var(--grn-color-content2);transition:color ", getTransition('fast'), ";", function (p) {
+})(styles.buttonReset, ";border:none;border-left:1px solid transparent;padding:0;min-width:", width, ";height:calc(", componentVars.textBoxHeight, " - 2px);background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;color:var(--grn-color-content2);transition:color ", getTransition('fast'), ";", function (p) {
   return p.isActive && "\n    color: var(--grn-color-content);\n  ";
 }, ";&+.IconToggle{border-color:var(--grn-color-border);}&:after{content:'';pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;transition:", getTransition('xFast'), ";", function (p) {
-  return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";
-}, ";}&:first-of-type{min-width:calc(", width, " - 1px);}&:first-of-type:after{width:calc(100% + 1px);left:-1px;border-radius:var(--grn-radius-s) 0 0 var(--grn-radius-s);}&:last-child:after{border-radius:0 var(--grn-radius-s) var(--grn-radius-s) 0;}&:hover{color:var(--grn-color-content);}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldEJvcmRlciwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLic7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3Qgd2lkdGggPSBgY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gKyAycHgpYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7Z2V0Qm9yZGVyKCdhbGwnKX07XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbmA7XG5cbmNvbnN0IEl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgJHtnZXRCb3JkZXIoJ2xlZnQnKX07XG4gIHBhZGRpbmc6IDA7XG4gIG1pbi13aWR0aDogJHt3aWR0aH07XG4gIGhlaWdodDogY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAycHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50Mik7XG4gIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignZmFzdCcpfTtcblxuICAke3AgPT5cbiAgICBwLmlzQWN0aXZlICYmXG4gICAgYFxuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gIGB9O1xuXG4gICYgKyAuSWNvblRvZ2dsZSB7XG4gICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tY29sb3ItYm9yZGVyKTtcbiAgfVxuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcbiAgICAke3AgPT4gcC5pc0FjdGl2ZSAmJiBgYm94LXNoYWRvdzogMCAwIDAgMXB4IHZhcigtLWdybi1jb2xvci1ncmV5NilgfTtcbiAgfVxuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgbWluLXdpZHRoOiBjYWxjKCR7d2lkdGh9IC0gMXB4KTtcbiAgfVxuXG4gICY6Zmlyc3Qtb2YtdHlwZTphZnRlciB7XG4gICAgd2lkdGg6IGNhbGMoMTAwJSArIDFweCk7XG4gICAgbGVmdDogLTFweDtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ncm4tcmFkaXVzLXMpIDAgMCB2YXIoLS1ncm4tcmFkaXVzLXMpO1xuICB9XG5cbiAgJjpsYXN0LWNoaWxkOmFmdGVyIHtcbiAgICBib3JkZXItcmFkaXVzOiAwIHZhcigtLWdybi1yYWRpdXMtcykgdmFyKC0tZ3JuLXJhZGl1cy1zKSAwO1xuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEljb25Ub2dnbGUgPSAoeyBjaGlsZHJlbiwgaWNvbiwgaXNBY3RpdmUsIG9uQ2xpY2ssIC4uLnByb3BzIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8SXRlbVdyYXBwZXIgY2xhc3NOYW1lPVwiSWNvblRvZ2dsZVwiIGlzQWN0aXZlPXtpc0FjdGl2ZX0gb25DbGljaz17b25DbGlja30gey4uLnByb3BzfT5cbiAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz59XG4gICAgICB7Y2hpbGRyZW4gJiYgY2hpbGRyZW59XG4gICAgPC9JdGVtV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBJY29uVG9nZ2xlR3JvdXAgPSAoeyBjaGlsZHJlbiwgLi4ucHJvcHMgfSkgPT4gPFdyYXBwZXIgey4uLnByb3BzfT57Y2hpbGRyZW59PC9XcmFwcGVyPjtcblxuSWNvblRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuSWNvblRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogdHlwZXMuaWNvbixcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
+  return p.isActive && "box-shadow: 0 0 0 1px ".concat(componentVars.activeBorderColor);
+}, ";}&:first-of-type{min-width:calc(", width, " - 1px);}&:first-of-type:after{width:calc(100% + 1px);left:-1px;border-radius:var(--grn-radius-s) 0 0 var(--grn-radius-s);}&:last-child:after{border-radius:0 var(--grn-radius-s) var(--grn-radius-s) 0;}&:hover{color:var(--grn-color-content);}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldEJvcmRlciwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLic7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3Qgd2lkdGggPSBgY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gKyAycHgpYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7Z2V0Qm9yZGVyKCdhbGwnKX07XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbmA7XG5cbmNvbnN0IEl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLWxlZnQ6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcbiAgcGFkZGluZzogMDtcbiAgbWluLXdpZHRoOiAke3dpZHRofTtcbiAgaGVpZ2h0OiBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSAtIDJweCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgdHJhbnNpdGlvbjogY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuXG4gICR7cCA9PlxuICAgIHAuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgYH07XG5cbiAgJiArIC5JY29uVG9nZ2xlIHtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1jb2xvci1ib3JkZXIpO1xuICB9XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgICR7cCA9PiBwLmlzQWN0aXZlICYmIGBib3gtc2hhZG93OiAwIDAgMCAxcHggJHtjb21wb25lbnRWYXJzLmFjdGl2ZUJvcmRlckNvbG9yfWB9O1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICBtaW4td2lkdGg6IGNhbGMoJHt3aWR0aH0gLSAxcHgpO1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlOmFmdGVyIHtcbiAgICB3aWR0aDogY2FsYygxMDAlICsgMXB4KTtcbiAgICBsZWZ0OiAtMXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcykgMCAwIHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIH1cblxuICAmOmxhc3QtY2hpbGQ6YWZ0ZXIge1xuICAgIGJvcmRlci1yYWRpdXM6IDAgdmFyKC0tZ3JuLXJhZGl1cy1zKSB2YXIoLS1ncm4tcmFkaXVzLXMpIDA7XG4gIH1cblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvblRvZ2dsZSA9ICh7IGNoaWxkcmVuLCBpY29uLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxJdGVtV3JhcHBlciBjbGFzc05hbWU9XCJJY29uVG9nZ2xlXCIgaXNBY3RpdmU9e2lzQWN0aXZlfSBvbkNsaWNrPXtvbkNsaWNrfSB7Li4ucHJvcHN9PlxuICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gY29sb3I9XCJjdXJyZW50Q29sb3JcIiAvPn1cbiAgICAgIHtjaGlsZHJlbiAmJiBjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IEljb25Ub2dnbGVHcm91cCA9ICh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9KSA9PiA8V3JhcHBlciB7Li4ucHJvcHN9PntjaGlsZHJlbn08L1dyYXBwZXI+O1xuXG5JY29uVG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG59O1xuXG5JY29uVG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiB0eXBlcy5pY29uLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
 
 export var IconToggle = function IconToggle(_ref) {
   var children = _ref.children,

package/es/components/tab.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.assign.js";
 import _styled from "@emotion/styled/base";
 var _excluded = ["children", "isActive", "onClick"],
-    _excluded2 = ["children", "height"];
+    _excluded2 = ["children", "height", "hasFullWidth"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -16,7 +16,7 @@ import { getTransition, getDimension } from '../utilities';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '../types';
-import { styles } from '../foundational';
+import { componentVars, styles } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
@@ -24,9 +24,11 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
 } : {
   target: "e1et4hjk1",
   label: "Wrapper"
-})("display:flex;gap:var(--grn-space-l);width:fit-content;align-items:stretch;height:", function (p) {
+})("display:flex;gap:var(--grn-space-l);align-items:stretch;height:", function (p) {
   return getDimension(p.height);
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTzBCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRUcmFuc2l0aW9uLCBnZXREaW1lbnNpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IHZhcigtLWdybi1zcGFjZS1sKTtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuICBhbGlnbi1pdGVtczogc3RyZXRjaDtcbiAgaGVpZ2h0OiAke3AgPT4gZ2V0RGltZW5zaW9uKHAuaGVpZ2h0KX07XG5gO1xuXG5jb25zdCBUYWJXcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50Mik7XG4gIGJvcmRlci1yYWRpdXM6IDA7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignZmFzdCcpfSwgYm94LXNoYWRvdyAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gIH1cblxuICAke3AgPT5cbiAgICBwLmlzQWN0aXZlICYmXG4gICAgYFxuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgLTJweCAwIHZhcigtLWdybi1jb2xvci1ncmV5Nik7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgYH07XG5gO1xuXG5leHBvcnQgY29uc3QgVGFiID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFRhYldyYXBwZXIgaXNBY3RpdmU9e2lzQWN0aXZlfSBvbkNsaWNrPXtvbkNsaWNrfSB7Li4ucHJvcHN9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGFiV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBUYWJHcm91cCA9ICh7IGNoaWxkcmVuLCBoZWlnaHQgPSA2LCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxXcmFwcGVyIGhlaWdodD17aGVpZ2h0fSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKTtcblxuVGFiR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhlaWdodDogdHlwZXMuZGltZW5zaW9uLFxufTtcblxuVGFiLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
+}, ";", function (p) {
+  return p.hasFullWidth && "\n    .Tab {\n      flex: 1 0 0;\n    }\n  ";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTzBCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRUcmFuc2l0aW9uLCBnZXREaW1lbnNpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIHN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IHZhcigtLWdybi1zcGFjZS1sKTtcbiAgYWxpZ24taXRlbXM6IHN0cmV0Y2g7XG4gIGhlaWdodDogJHtwID0+IGdldERpbWVuc2lvbihwLmhlaWdodCl9O1xuXG4gICR7cCA9PlxuICAgIHAuaGFzRnVsbFdpZHRoICYmXG4gICAgYFxuICAgIC5UYWIge1xuICAgICAgZmxleDogMSAwIDA7XG4gICAgfVxuICBgfVxuYDtcblxuY29uc3QgVGFiV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcblxuICBib3JkZXI6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIGhlaWdodDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICBib3JkZXItcmFkaXVzOiAwO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX0sIGJveC1zaGFkb3cgJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICB9XG5cbiAgJHtwID0+XG4gICAgcC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICBib3gtc2hhZG93OiBpbnNldCAwIC0ycHggMCAke2NvbXBvbmVudFZhcnMuYWN0aXZlQm9yZGVyQ29sb3J9O1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gIGB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFRhYiA9ICh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxUYWJXcmFwcGVyIGlzQWN0aXZlPXtpc0FjdGl2ZX0gb25DbGljaz17b25DbGlja30gY2xhc3NOYW1lPVwiVGFiXCIgey4uLnByb3BzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1RhYldyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgVGFiR3JvdXAgPSAoeyBjaGlsZHJlbiwgaGVpZ2h0ID0gNiwgaGFzRnVsbFdpZHRoLCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxXcmFwcGVyIGhlaWdodD17aGVpZ2h0fSBoYXNGdWxsV2lkdGg9e2hhc0Z1bGxXaWR0aH0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvV3JhcHBlcj5cbik7XG5cblRhYkdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBoZWlnaHQ6IHR5cGVzLmRpbWVuc2lvbixcbiAgaGFzRnVsbFdpZHRoOiBQcm9wVHlwZXMuYm9vbCxcbn07XG5cblRhYi5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
 
 var TabWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "e1et4hjk0"
@@ -34,8 +36,8 @@ var TabWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "produc
   target: "e1et4hjk0",
   label: "TabWrapper"
 })(styles.buttonReset, ";border:none;padding:0;height:100%;background-color:transparent;color:var(--grn-color-content2);border-radius:0;white-space:nowrap;transition:color ", getTransition('fast'), ",box-shadow ", getTransition('xFast'), ";&:hover{color:var(--grn-color-content);}", function (p) {
-  return p.isActive && "\n    box-shadow: inset 0 -2px 0 var(--grn-color-grey6);\n    color: var(--grn-color-content);\n  ";
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWdDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRUcmFuc2l0aW9uLCBnZXREaW1lbnNpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6IHZhcigtLWdybi1zcGFjZS1sKTtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuICBhbGlnbi1pdGVtczogc3RyZXRjaDtcbiAgaGVpZ2h0OiAke3AgPT4gZ2V0RGltZW5zaW9uKHAuaGVpZ2h0KX07XG5gO1xuXG5jb25zdCBUYWJXcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgaGVpZ2h0OiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50Mik7XG4gIGJvcmRlci1yYWRpdXM6IDA7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRyYW5zaXRpb246IGNvbG9yICR7Z2V0VHJhbnNpdGlvbignZmFzdCcpfSwgYm94LXNoYWRvdyAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gIH1cblxuICAke3AgPT5cbiAgICBwLmlzQWN0aXZlICYmXG4gICAgYFxuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgLTJweCAwIHZhcigtLWdybi1jb2xvci1ncmV5Nik7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgYH07XG5gO1xuXG5leHBvcnQgY29uc3QgVGFiID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFRhYldyYXBwZXIgaXNBY3RpdmU9e2lzQWN0aXZlfSBvbkNsaWNrPXtvbkNsaWNrfSB7Li4ucHJvcHN9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvVGFiV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBUYWJHcm91cCA9ICh7IGNoaWxkcmVuLCBoZWlnaHQgPSA2LCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxXcmFwcGVyIGhlaWdodD17aGVpZ2h0fSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKTtcblxuVGFiR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhlaWdodDogdHlwZXMuZGltZW5zaW9uLFxufTtcblxuVGFiLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
+  return p.isActive && "\n    box-shadow: inset 0 -2px 0 ".concat(componentVars.activeBorderColor, ";\n    color: var(--grn-color-content);\n  ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RhYi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JnQyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90YWIuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0VHJhbnNpdGlvbiwgZ2V0RGltZW5zaW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBjb21wb25lbnRWYXJzLCBzdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiB2YXIoLS1ncm4tc3BhY2UtbCk7XG4gIGFsaWduLWl0ZW1zOiBzdHJldGNoO1xuICBoZWlnaHQ6ICR7cCA9PiBnZXREaW1lbnNpb24ocC5oZWlnaHQpfTtcblxuICAke3AgPT5cbiAgICBwLmhhc0Z1bGxXaWR0aCAmJlxuICAgIGBcbiAgICAuVGFiIHtcbiAgICAgIGZsZXg6IDEgMCAwO1xuICAgIH1cbiAgYH1cbmA7XG5cbmNvbnN0IFRhYldyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgYm9yZGVyLXJhZGl1czogMDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdHJhbnNpdGlvbjogY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9LCBib3gtc2hhZG93ICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgfVxuXG4gICR7cCA9PlxuICAgIHAuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgYm94LXNoYWRvdzogaW5zZXQgMCAtMnB4IDAgJHtjb21wb25lbnRWYXJzLmFjdGl2ZUJvcmRlckNvbG9yfTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICBgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUYWIgPSAoeyBjaGlsZHJlbiwgaXNBY3RpdmUsIG9uQ2xpY2ssIC4uLnByb3BzIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8VGFiV3JhcHBlciBpc0FjdGl2ZT17aXNBY3RpdmV9IG9uQ2xpY2s9e29uQ2xpY2t9IGNsYXNzTmFtZT1cIlRhYlwiIHsuLi5wcm9wc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9UYWJXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFRhYkdyb3VwID0gKHsgY2hpbGRyZW4sIGhlaWdodCA9IDYsIGhhc0Z1bGxXaWR0aCwgLi4ucHJvcHMgfSkgPT4gKFxuICA8V3JhcHBlciBoZWlnaHQ9e2hlaWdodH0gaGFzRnVsbFdpZHRoPXtoYXNGdWxsV2lkdGh9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pO1xuXG5UYWJHcm91cC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaGVpZ2h0OiB0eXBlcy5kaW1lbnNpb24sXG4gIGhhc0Z1bGxXaWR0aDogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5UYWIucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */"));
 
 export var Tab = function Tab(_ref) {
   var children = _ref.children,
@@ -45,22 +47,26 @@ export var Tab = function Tab(_ref) {
 
   return ___EmotionJSX(TabWrapper, _extends({
     isActive: isActive,
-    onClick: onClick
+    onClick: onClick,
+    className: "Tab"
   }, props), children);
 };
 export var TabGroup = function TabGroup(_ref2) {
   var children = _ref2.children,
       _ref2$height = _ref2.height,
       height = _ref2$height === void 0 ? 6 : _ref2$height,
+      hasFullWidth = _ref2.hasFullWidth,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
   return ___EmotionJSX(Wrapper, _extends({
-    height: height
+    height: height,
+    hasFullWidth: hasFullWidth
   }, props), children);
 };
 TabGroup.propTypes = {
   children: PropTypes.node,
-  height: types.dimension
+  height: types.dimension,
+  hasFullWidth: PropTypes.bool
 };
 Tab.propTypes = {
   children: PropTypes.node,

package/es/components/text-toggle.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.assign.js";
 import _styled from "@emotion/styled/base";
 var _excluded = ["children", "isActive", "onClick"],
-    _excluded2 = ["children"];
+    _excluded2 = ["children", "hasFullWidth"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -23,7 +23,11 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
 } : {
   target: "e1fb3cwm1",
   label: "Wrapper"
-})("display:flex;", getBorder('all'), ";border-radius:1000px;width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Qm9yZGVyLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7Z2V0Qm9yZGVyKCdhbGwnKX07XG4gIGJvcmRlci1yYWRpdXM6IDEwMDBweDtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwIDE2cHg7XG4gIGhlaWdodDogY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAycHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX0sIGJveC1zaGFkb3cgJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICB9XG5cbiAgJHtwID0+XG4gICAgcC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICBgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyIGlzQWN0aXZlPXtpc0FjdGl2ZX0gb25DbGljaz17b25DbGlja30gey4uLnByb3BzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGVHcm91cCA9ICh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9KSA9PiA8V3JhcHBlciB7Li4ucHJvcHN9PntjaGlsZHJlbn08L1dyYXBwZXI+O1xuXG5UZXh0VG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG59O1xuXG5UZXh0VG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
+})("display:flex;", getBorder('all'), ";border-radius:1000px;", function (p) {
+  return !p.hasFullWidth && "width: fit-content";
+}, ";", function (p) {
+  return p.hasFullWidth && "\n    .TextToggle {\n      flex: 1 0 0;\n    }\n  ";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Qm9yZGVyLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7Z2V0Qm9yZGVyKCdhbGwnKX07XG4gIGJvcmRlci1yYWRpdXM6IDEwMDBweDtcblxuICAke3AgPT4gIXAuaGFzRnVsbFdpZHRoICYmIGB3aWR0aDogZml0LWNvbnRlbnRgfTtcbiAgJHtwID0+XG4gICAgcC5oYXNGdWxsV2lkdGggJiZcbiAgICBgXG4gICAgLlRleHRUb2dnbGUge1xuICAgICAgZmxleDogMSAwIDA7XG4gICAgfVxuICBgfVxuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwIDE2cHg7XG4gIGhlaWdodDogY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAycHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX0sIGJveC1zaGFkb3cgJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICB9XG5cbiAgJHtwID0+XG4gICAgcC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggJHtjb21wb25lbnRWYXJzLmFjdGl2ZUJvcmRlckNvbG9yfTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICBgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyIGlzQWN0aXZlPXtpc0FjdGl2ZX0gb25DbGljaz17b25DbGlja30gY2xhc3NOYW1lPVwiVGV4dFRvZ2dsZVwiIHsuLi5wcm9wc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9JdGVtV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlR3JvdXAgPSAoeyBjaGlsZHJlbiwgaGFzRnVsbFdpZHRoLCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxXcmFwcGVyIGhhc0Z1bGxXaWR0aD17aGFzRnVsbFdpZHRofSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKTtcblxuVGV4dFRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBoYXNGdWxsV2lkdGg6IFByb3BUeXBlcy5ib29sLFxufTtcblxuVGV4dFRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
 
 var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "e1fb3cwm0"
@@ -31,8 +35,8 @@ var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "produ
   target: "e1fb3cwm0",
   label: "ItemWrapper"
 })(styles.buttonReset, ";border:none;padding:0 16px;height:calc(", componentVars.textBoxHeight, " - 2px);background-color:transparent;position:relative;color:var(--grn-color-content2);border-radius:1000px;white-space:nowrap;transition:color ", getTransition('fast'), ",box-shadow ", getTransition('xFast'), ";&:hover{color:var(--grn-color-content);}", function (p) {
-  return p.isActive && "\n    box-shadow: 0 0 0 1px var(--grn-color-grey6);\n    color: var(--grn-color-content);\n  ";
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhaUMiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Qm9yZGVyLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gICR7Z2V0Qm9yZGVyKCdhbGwnKX07XG4gIGJvcmRlci1yYWRpdXM6IDEwMDBweDtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwIDE2cHg7XG4gIGhlaWdodDogY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAycHgpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiBjb2xvciAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX0sIGJveC1zaGFkb3cgJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICB9XG5cbiAgJHtwID0+XG4gICAgcC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggdmFyKC0tZ3JuLWNvbG9yLWdyZXk2KTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICBgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlID0gKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyIGlzQWN0aXZlPXtpc0FjdGl2ZX0gb25DbGljaz17b25DbGlja30gey4uLnByb3BzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGVHcm91cCA9ICh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9KSA9PiA8V3JhcHBlciB7Li4ucHJvcHN9PntjaGlsZHJlbn08L1dyYXBwZXI+O1xuXG5UZXh0VG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG59O1xuXG5UZXh0VG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
+  return p.isActive && "\n    box-shadow: 0 0 0 1px ".concat(componentVars.activeBorderColor, ";\n    color: var(--grn-color-content);\n  ");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldEJvcmRlciwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHN0eWxlcywgY29tcG9uZW50VmFycyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICAke2dldEJvcmRlcignYWxsJyl9O1xuICBib3JkZXItcmFkaXVzOiAxMDAwcHg7XG5cbiAgJHtwID0+ICFwLmhhc0Z1bGxXaWR0aCAmJiBgd2lkdGg6IGZpdC1jb250ZW50YH07XG4gICR7cCA9PlxuICAgIHAuaGFzRnVsbFdpZHRoICYmXG4gICAgYFxuICAgIC5UZXh0VG9nZ2xlIHtcbiAgICAgIGZsZXg6IDEgMCAwO1xuICAgIH1cbiAgYH1cbmA7XG5cbmNvbnN0IEl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMCAxNnB4O1xuICBoZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gMnB4KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50Mik7XG4gIGJvcmRlci1yYWRpdXM6IDEwMDBweDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdHJhbnNpdGlvbjogY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9LCBib3gtc2hhZG93ICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgfVxuXG4gICR7cCA9PlxuICAgIHAuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgYm94LXNoYWRvdzogMCAwIDAgMXB4ICR7Y29tcG9uZW50VmFycy5hY3RpdmVCb3JkZXJDb2xvcn07XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgYH07XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dFRvZ2dsZSA9ICh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxJdGVtV3JhcHBlciBpc0FjdGl2ZT17aXNBY3RpdmV9IG9uQ2xpY2s9e29uQ2xpY2t9IGNsYXNzTmFtZT1cIlRleHRUb2dnbGVcIiB7Li4ucHJvcHN9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvSXRlbVdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgVGV4dFRvZ2dsZUdyb3VwID0gKHsgY2hpbGRyZW4sIGhhc0Z1bGxXaWR0aCwgLi4ucHJvcHMgfSkgPT4gKFxuICA8V3JhcHBlciBoYXNGdWxsV2lkdGg9e2hhc0Z1bGxXaWR0aH0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvV3JhcHBlcj5cbik7XG5cblRleHRUb2dnbGVHcm91cC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRnVsbFdpZHRoOiBQcm9wVHlwZXMuYm9vbCxcbn07XG5cblRleHRUb2dnbGUucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */"));
 
 export var TextToggle = function TextToggle(_ref) {
   var children = _ref.children,
@@ -42,17 +46,22 @@ export var TextToggle = function TextToggle(_ref) {
 
   return ___EmotionJSX(ItemWrapper, _extends({
     isActive: isActive,
-    onClick: onClick
+    onClick: onClick,
+    className: "TextToggle"
   }, props), children);
 };
 export var TextToggleGroup = function TextToggleGroup(_ref2) {
   var children = _ref2.children,
+      hasFullWidth = _ref2.hasFullWidth,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
-  return ___EmotionJSX(Wrapper, props, children);
+  return ___EmotionJSX(Wrapper, _extends({
+    hasFullWidth: hasFullWidth
+  }, props), children);
 };
 TextToggleGroup.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  hasFullWidth: PropTypes.bool
 };
 TextToggle.propTypes = {
   children: PropTypes.node,

package/es/foundational/styles.js

@@ -6,13 +6,14 @@ export var componentVars = {
   fieldBorderColor: getColor('fade3'),
   fieldBorderColorHover: getColor('fade6'),
   fieldBorderColorFocus: getColor('grey6'),
+  activeBorderColor: getColor('grey6'),
   textBoxHeight: '40px',
   clearButtonHeight: '36px'
 };
-var buttonResetStyles = /*#__PURE__*/css("appearance:none;font-family:inherit;font-size:inherit;font-weight:", getWeight('medium'), ";cursor:pointer;" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonResetStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9zdHlsZXMuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiwgZ2V0V2VpZ2h0IH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgZmllbGRYUGFkZGluZzogJzEycHgnLFxuICBmaWVsZEJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTMnKSxcbiAgZmllbGRCb3JkZXJDb2xvckhvdmVyOiBnZXRDb2xvcignZmFkZTYnKSxcbiAgZmllbGRCb3JkZXJDb2xvckZvY3VzOiBnZXRDb2xvcignZ3JleTYnKSxcbiAgdGV4dEJveEhlaWdodDogJzQwcHgnLFxuICBjbGVhckJ1dHRvbkhlaWdodDogJzM2cHgnLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCB0cmFuc2l0aW9uU3R5bGVzID0gY3NzYFxuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ3Nsb3cnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246IDBzO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxuXG4gIGNsZWFyQnV0dG9uOiBjc3NgXG4gICAgJHtidXR0b25SZXNldFN0eWxlc307XG4gICAgJHt0cmFuc2l0aW9uU3R5bGVzfTtcbiAgICAtLWdybi1ib3JkZXJDb2xvci1hY3RpdmU6IHZhcigtLWdybi1jb2xvci1mYWRlNSk7XG5cbiAgICBib3JkZXI6ICR7Y29tcG9uZW50VmFycy5ib3JkZXJXaWR0aH0gc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ncm4tY29sb3ItYmFja2dyb3VuZE92ZXJsYXkpO1xuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWJvcmRlckNvbG9yLWFjdGl2ZSk7XG4gICAgICBvdXRsaW5lLWNvbG9yOiB2YXIoLS1ncm4tYm9yZGVyQ29sb3ItYWN0aXZlKTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICAgIGN1cnNvcjogZGVmYXVsdDtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG59O1xuIl19 */");
-var transitionStyles = /*#__PURE__*/css("transition:", getTransition('slow'), ";&:hover{transition:", getTransition('fast'), ";}&:active{transition:0s;}" + (process.env.NODE_ENV === "production" ? "" : ";label:transitionStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQjRCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmV4cG9ydCBjb25zdCBjb21wb25lbnRWYXJzID0ge1xuICBib3JkZXJXaWR0aDogJzFweCcsXG4gIGZpZWxkWFBhZGRpbmc6ICcxMnB4JyxcbiAgZmllbGRCb3JkZXJDb2xvcjogZ2V0Q29sb3IoJ2ZhZGUzJyksXG4gIGZpZWxkQm9yZGVyQ29sb3JIb3ZlcjogZ2V0Q29sb3IoJ2ZhZGU2JyksXG4gIGZpZWxkQm9yZGVyQ29sb3JGb2N1czogZ2V0Q29sb3IoJ2dyZXk2JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4Jyxcbn07XG5cbmNvbnN0IGJ1dHRvblJlc2V0U3R5bGVzID0gY3NzYFxuICBhcHBlYXJhbmNlOiBub25lO1xuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgZm9udC1zaXplOiBpbmhlcml0O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdzbG93Jyl9O1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignZmFzdCcpfTtcbiAgfVxuXG4gICY6YWN0aXZlIHtcbiAgICB0cmFuc2l0aW9uOiAwcztcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYnV0dG9uUmVzZXQ6IGJ1dHRvblJlc2V0U3R5bGVzLFxuICB0cmFuc2l0aW9uczogdHJhbnNpdGlvblN0eWxlcyxcblxuICBjbGVhckJ1dHRvbjogY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgLS1ncm4tYm9yZGVyQ29sb3ItYWN0aXZlOiB2YXIoLS1ncm4tY29sb3ItZmFkZTUpO1xuXG4gICAgYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuYm9yZGVyV2lkdGh9IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgIHBhZGRpbmc6IDA7XG4gICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgaGVpZ2h0OiAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9O1xuICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWJhY2tncm91bmRPdmVybGF5KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1ib3JkZXJDb2xvci1hY3RpdmUpO1xuICAgICAgb3V0bGluZS1jb2xvcjogdmFyKC0tZ3JuLWJvcmRlckNvbG9yLWFjdGl2ZSk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICB9XG5cbiAgICAmOmRpc2FibGVkIHtcbiAgICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50RGlzYWJsZWQnKX07XG4gICAgICBjdXJzb3I6IGRlZmF1bHQ7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICB9XG4gICAgfVxuICBgLFxufTtcbiJdfQ== */");
+var buttonResetStyles = /*#__PURE__*/css("appearance:none;font-family:inherit;font-size:inherit;font-weight:", getWeight('medium'), ";cursor:pointer;" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonResetStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2ZvdW5kYXRpb25hbC9zdHlsZXMuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiwgZ2V0V2VpZ2h0IH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuZXhwb3J0IGNvbnN0IGNvbXBvbmVudFZhcnMgPSB7XG4gIGJvcmRlcldpZHRoOiAnMXB4JyxcbiAgZmllbGRYUGFkZGluZzogJzEycHgnLFxuICBmaWVsZEJvcmRlckNvbG9yOiBnZXRDb2xvcignZmFkZTMnKSxcbiAgZmllbGRCb3JkZXJDb2xvckhvdmVyOiBnZXRDb2xvcignZmFkZTYnKSxcbiAgZmllbGRCb3JkZXJDb2xvckZvY3VzOiBnZXRDb2xvcignZ3JleTYnKSxcbiAgYWN0aXZlQm9yZGVyQ29sb3I6IGdldENvbG9yKCdncmV5NicpLFxuICB0ZXh0Qm94SGVpZ2h0OiAnNDBweCcsXG4gIGNsZWFyQnV0dG9uSGVpZ2h0OiAnMzZweCcsXG59O1xuXG5jb25zdCBidXR0b25SZXNldFN0eWxlcyA9IGNzc2BcbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgZm9udC1mYW1pbHk6IGluaGVyaXQ7XG4gIGZvbnQtc2l6ZTogaW5oZXJpdDtcbiAgZm9udC13ZWlnaHQ6ICR7Z2V0V2VpZ2h0KCdtZWRpdW0nKX07XG4gIGN1cnNvcjogcG9pbnRlcjtcbmA7XG5cbmNvbnN0IHRyYW5zaXRpb25TdHlsZXMgPSBjc3NgXG4gIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignc2xvdycpfTtcblxuICAmOmhvdmVyIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNpdGlvbjogMHM7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIGJ1dHRvblJlc2V0OiBidXR0b25SZXNldFN0eWxlcyxcbiAgdHJhbnNpdGlvbnM6IHRyYW5zaXRpb25TdHlsZXMsXG5cbiAgY2xlYXJCdXR0b246IGNzc2BcbiAgICAke2J1dHRvblJlc2V0U3R5bGVzfTtcbiAgICAke3RyYW5zaXRpb25TdHlsZXN9O1xuICAgIC0tZ3JuLWJvcmRlckNvbG9yLWFjdGl2ZTogdmFyKC0tZ3JuLWNvbG9yLWZhZGU1KTtcblxuICAgIGJvcmRlcjogJHtjb21wb25lbnRWYXJzLmJvcmRlcldpZHRofSBzb2xpZCB0cmFuc3BhcmVudDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgIGhlaWdodDogJHtjb21wb25lbnRWYXJzLmNsZWFyQnV0dG9uSGVpZ2h0fTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWdybi1jb2xvci1iYWNrZ3JvdW5kT3ZlcmxheSk7XG4gICAgfVxuXG4gICAgJjphY3RpdmUge1xuICAgICAgYm9yZGVyLWNvbG9yOiB2YXIoLS1ncm4tYm9yZGVyQ29sb3ItYWN0aXZlKTtcbiAgICAgIG91dGxpbmUtY29sb3I6IHZhcigtLWdybi1ib3JkZXJDb2xvci1hY3RpdmUpO1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudERpc2FibGVkJyl9O1xuICAgICAgY3Vyc29yOiBkZWZhdWx0O1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgfVxuICAgIH1cbiAgYCxcbn07XG4iXX0= */");
+var transitionStyles = /*#__PURE__*/css("transition:", getTransition('slow'), ";&:hover{transition:", getTransition('fast'), ";}&:active{transition:0s;}" + (process.env.NODE_ENV === "production" ? "" : ";label:transitionStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQjRCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmV4cG9ydCBjb25zdCBjb21wb25lbnRWYXJzID0ge1xuICBib3JkZXJXaWR0aDogJzFweCcsXG4gIGZpZWxkWFBhZGRpbmc6ICcxMnB4JyxcbiAgZmllbGRCb3JkZXJDb2xvcjogZ2V0Q29sb3IoJ2ZhZGUzJyksXG4gIGZpZWxkQm9yZGVyQ29sb3JIb3ZlcjogZ2V0Q29sb3IoJ2ZhZGU2JyksXG4gIGZpZWxkQm9yZGVyQ29sb3JGb2N1czogZ2V0Q29sb3IoJ2dyZXk2JyksXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignZ3JleTYnKSxcbiAgdGV4dEJveEhlaWdodDogJzQwcHgnLFxuICBjbGVhckJ1dHRvbkhlaWdodDogJzM2cHgnLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCB0cmFuc2l0aW9uU3R5bGVzID0gY3NzYFxuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ3Nsb3cnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246IDBzO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxuXG4gIGNsZWFyQnV0dG9uOiBjc3NgXG4gICAgJHtidXR0b25SZXNldFN0eWxlc307XG4gICAgJHt0cmFuc2l0aW9uU3R5bGVzfTtcbiAgICAtLWdybi1ib3JkZXJDb2xvci1hY3RpdmU6IHZhcigtLWdybi1jb2xvci1mYWRlNSk7XG5cbiAgICBib3JkZXI6ICR7Y29tcG9uZW50VmFycy5ib3JkZXJXaWR0aH0gc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ncm4tY29sb3ItYmFja2dyb3VuZE92ZXJsYXkpO1xuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWJvcmRlckNvbG9yLWFjdGl2ZSk7XG4gICAgICBvdXRsaW5lLWNvbG9yOiB2YXIoLS1ncm4tYm9yZGVyQ29sb3ItYWN0aXZlKTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICAgIGN1cnNvcjogZGVmYXVsdDtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG59O1xuIl19 */");
 export var styles = {
   buttonReset: buttonResetStyles,
   transitions: transitionStyles,
-  clearButton: /*#__PURE__*/css(buttonResetStyles, ";", transitionStyles, ";--grn-borderColor-active:var(--grn-color-fade5);border:", componentVars.borderWidth, " solid transparent;padding:0;border-radius:", getRadius('s'), ";height:", componentVars.clearButtonHeight, ";background-color:transparent;display:flex;align-items:center;justify-content:center;&:hover{background-color:var(--grn-color-backgroundOverlay);}&:active{border-color:var(--grn-borderColor-active);outline-color:var(--grn-borderColor-active);background-color:transparent;}&:disabled{color:", getColor('contentDisabled'), ";cursor:default;border-color:transparent;&:hover{background-color:transparent;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:clearButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ2tCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmV4cG9ydCBjb25zdCBjb21wb25lbnRWYXJzID0ge1xuICBib3JkZXJXaWR0aDogJzFweCcsXG4gIGZpZWxkWFBhZGRpbmc6ICcxMnB4JyxcbiAgZmllbGRCb3JkZXJDb2xvcjogZ2V0Q29sb3IoJ2ZhZGUzJyksXG4gIGZpZWxkQm9yZGVyQ29sb3JIb3ZlcjogZ2V0Q29sb3IoJ2ZhZGU2JyksXG4gIGZpZWxkQm9yZGVyQ29sb3JGb2N1czogZ2V0Q29sb3IoJ2dyZXk2JyksXG4gIHRleHRCb3hIZWlnaHQ6ICc0MHB4JyxcbiAgY2xlYXJCdXR0b25IZWlnaHQ6ICczNnB4Jyxcbn07XG5cbmNvbnN0IGJ1dHRvblJlc2V0U3R5bGVzID0gY3NzYFxuICBhcHBlYXJhbmNlOiBub25lO1xuICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgZm9udC1zaXplOiBpbmhlcml0O1xuICBmb250LXdlaWdodDogJHtnZXRXZWlnaHQoJ21lZGl1bScpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuYDtcblxuY29uc3QgdHJhbnNpdGlvblN0eWxlcyA9IGNzc2BcbiAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdzbG93Jyl9O1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignZmFzdCcpfTtcbiAgfVxuXG4gICY6YWN0aXZlIHtcbiAgICB0cmFuc2l0aW9uOiAwcztcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgYnV0dG9uUmVzZXQ6IGJ1dHRvblJlc2V0U3R5bGVzLFxuICB0cmFuc2l0aW9uczogdHJhbnNpdGlvblN0eWxlcyxcblxuICBjbGVhckJ1dHRvbjogY3NzYFxuICAgICR7YnV0dG9uUmVzZXRTdHlsZXN9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gICAgLS1ncm4tYm9yZGVyQ29sb3ItYWN0aXZlOiB2YXIoLS1ncm4tY29sb3ItZmFkZTUpO1xuXG4gICAgYm9yZGVyOiAke2NvbXBvbmVudFZhcnMuYm9yZGVyV2lkdGh9IHNvbGlkIHRyYW5zcGFyZW50O1xuICAgIHBhZGRpbmc6IDA7XG4gICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgaGVpZ2h0OiAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9O1xuICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblxuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWJhY2tncm91bmRPdmVybGF5KTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1ib3JkZXJDb2xvci1hY3RpdmUpO1xuICAgICAgb3V0bGluZS1jb2xvcjogdmFyKC0tZ3JuLWJvcmRlckNvbG9yLWFjdGl2ZSk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICB9XG5cbiAgICAmOmRpc2FibGVkIHtcbiAgICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50RGlzYWJsZWQnKX07XG4gICAgICBjdXJzb3I6IGRlZmF1bHQ7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICB9XG4gICAgfVxuICBgLFxufTtcbiJdfQ== */")
+  clearButton: /*#__PURE__*/css(buttonResetStyles, ";", transitionStyles, ";--grn-borderColor-active:var(--grn-color-fade5);border:", componentVars.borderWidth, " solid transparent;padding:0;border-radius:", getRadius('s'), ";height:", componentVars.clearButtonHeight, ";background-color:transparent;display:flex;align-items:center;justify-content:center;&:hover{background-color:var(--grn-color-backgroundOverlay);}&:active{border-color:var(--grn-borderColor-active);outline-color:var(--grn-borderColor-active);background-color:transparent;}&:disabled{color:", getColor('contentDisabled'), ";cursor:default;border-color:transparent;&:hover{background-color:transparent;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:clearButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ2tCIiwiZmlsZSI6Ii4uLy4uL3NyYy9mb3VuZGF0aW9uYWwvc3R5bGVzLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRyYW5zaXRpb24sIGdldFdlaWdodCB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmV4cG9ydCBjb25zdCBjb21wb25lbnRWYXJzID0ge1xuICBib3JkZXJXaWR0aDogJzFweCcsXG4gIGZpZWxkWFBhZGRpbmc6ICcxMnB4JyxcbiAgZmllbGRCb3JkZXJDb2xvcjogZ2V0Q29sb3IoJ2ZhZGUzJyksXG4gIGZpZWxkQm9yZGVyQ29sb3JIb3ZlcjogZ2V0Q29sb3IoJ2ZhZGU2JyksXG4gIGZpZWxkQm9yZGVyQ29sb3JGb2N1czogZ2V0Q29sb3IoJ2dyZXk2JyksXG4gIGFjdGl2ZUJvcmRlckNvbG9yOiBnZXRDb2xvcignZ3JleTYnKSxcbiAgdGV4dEJveEhlaWdodDogJzQwcHgnLFxuICBjbGVhckJ1dHRvbkhlaWdodDogJzM2cHgnLFxufTtcblxuY29uc3QgYnV0dG9uUmVzZXRTdHlsZXMgPSBjc3NgXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICBmb250LXNpemU6IGluaGVyaXQ7XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuXG5jb25zdCB0cmFuc2l0aW9uU3R5bGVzID0gY3NzYFxuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ3Nsb3cnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246IDBzO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBidXR0b25SZXNldDogYnV0dG9uUmVzZXRTdHlsZXMsXG4gIHRyYW5zaXRpb25zOiB0cmFuc2l0aW9uU3R5bGVzLFxuXG4gIGNsZWFyQnV0dG9uOiBjc3NgXG4gICAgJHtidXR0b25SZXNldFN0eWxlc307XG4gICAgJHt0cmFuc2l0aW9uU3R5bGVzfTtcbiAgICAtLWdybi1ib3JkZXJDb2xvci1hY3RpdmU6IHZhcigtLWdybi1jb2xvci1mYWRlNSk7XG5cbiAgICBib3JkZXI6ICR7Y29tcG9uZW50VmFycy5ib3JkZXJXaWR0aH0gc29saWQgdHJhbnNwYXJlbnQ7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBoZWlnaHQ6ICR7Y29tcG9uZW50VmFycy5jbGVhckJ1dHRvbkhlaWdodH07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1ncm4tY29sb3ItYmFja2dyb3VuZE92ZXJsYXkpO1xuICAgIH1cblxuICAgICY6YWN0aXZlIHtcbiAgICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWJvcmRlckNvbG9yLWFjdGl2ZSk7XG4gICAgICBvdXRsaW5lLWNvbG9yOiB2YXIoLS1ncm4tYm9yZGVyQ29sb3ItYWN0aXZlKTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIH1cblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICAgIGN1cnNvcjogZGVmYXVsdDtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG59O1xuIl19 */")
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.16.6",
+  "version": "5.17.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",