@flodesk/grain 11.75.0 → 11.75.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/es/components/switch.js
CHANGED
|
@@ -19,7 +19,7 @@ const Input = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "production
|
|
|
19
19
|
} : {
|
|
20
20
|
target: "ez8kn7b1",
|
|
21
21
|
label: "Input"
|
|
22
|
-
})("--trackColor:", getColor('shade6'), ";--knobColor:", getColor('shade1'), ";--knobTranslate:0;appearance:none;height:", trackHeightPx, "px;width:", trackWidthPx, "px;display:block;border-radius:", trackHeightPx / 2, "px;transition:background-color ", getTransition('xFast'), ";cursor:pointer;margin:0;position:relative;background-color:var(--trackColor);&:after{content:'';position:absolute;left:", trackOffsetPx, "px;top:", trackOffsetPx, "px;height:", knobSizePx, "px;width:", knobSizePx, "px;border-radius:100%;background-color:var(--knobColor);display:block;transition:transform ", getTransition('xFast'), ";pointer-events:none;transform:translateX(var(--knobTranslate));transition:var(--grn-transition-leave) transform;}&:hover:after,&:checked:hover:after{transition:var(--grn-transition-hover) transform;}&:checked:hover:after{--knobTranslate:", knobActivePositionPx, "px;}&:hover{--trackColor:", getColor('shade7'), ";}&:checked{--trackColor:", getColor('content'), ";}&:checked:hover{--trackColor:", getColor('shade8'), ";}&:checked:after{--knobTranslate:", knobActivePositionPx, "px;}&:disabled{--trackColor:", getColor('
|
|
22
|
+
})("--trackColor:", getColor('shade6'), ";--knobColor:", getColor('shade1'), ";--knobTranslate:0;appearance:none;height:", trackHeightPx, "px;width:", trackWidthPx, "px;display:block;border-radius:", trackHeightPx / 2, "px;transition:background-color ", getTransition('xFast'), ";cursor:pointer;margin:0;position:relative;background-color:var(--trackColor);&:after{content:'';position:absolute;left:", trackOffsetPx, "px;top:", trackOffsetPx, "px;height:", knobSizePx, "px;width:", knobSizePx, "px;border-radius:100%;background-color:var(--knobColor);display:block;transition:transform ", getTransition('xFast'), ";pointer-events:none;transform:translateX(var(--knobTranslate));transition:var(--grn-transition-leave) transform;}&:hover:after,&:checked:hover:after{transition:var(--grn-transition-hover) transform;}&:checked:hover:after{--knobTranslate:", knobActivePositionPx, "px;}&:hover{--trackColor:", getColor('shade7'), ";}&:checked{--trackColor:", getColor('content'), ";}&:checked:hover{--trackColor:", getColor('shade8'), ";}&:checked:after{--knobTranslate:", knobActivePositionPx, "px;}&:disabled{--trackColor:", getColor('shade5'), ";pointer-events:none;&:checked{--trackColor:", getColor('shade7'), ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYTBCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRDb2xvciwgZ2V0U3BhY2UsIGdldFRyYW5zaXRpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgRmllbGRIaW50LCBGaWVsZExhYmVsIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBrbm9iU2l6ZVB4ID0gMTY7XG5jb25zdCB0cmFja09mZnNldFB4ID0gMjtcbmNvbnN0IHRyYWNrV2lkdGhQeCA9IDMyO1xuY29uc3QgdHJhY2tIZWlnaHRQeCA9IGtub2JTaXplUHggKyB0cmFja09mZnNldFB4ICogMjtcbmNvbnN0IGtub2JBY3RpdmVQb3NpdGlvblB4ID0gdHJhY2tXaWR0aFB4IC0ga25vYlNpemVQeCAtIHRyYWNrT2Zmc2V0UHggKiAyO1xuXG5jb25zdCBJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdzaGFkZTYnKX07XG4gIC0ta25vYkNvbG9yOiAke2dldENvbG9yKCdzaGFkZTEnKX07XG4gIC0ta25vYlRyYW5zbGF0ZTogMDtcblxuICBhcHBlYXJhbmNlOiBub25lO1xuICBoZWlnaHQ6ICR7dHJhY2tIZWlnaHRQeH1weDtcbiAgd2lkdGg6ICR7dHJhY2tXaWR0aFB4fXB4O1xuICBkaXNwbGF5OiBibG9jaztcbiAgYm9yZGVyLXJhZGl1czogJHt0cmFja0hlaWdodFB4IC8gMn1weDtcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG1hcmdpbjogMDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cmFja0NvbG9yKTtcblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbGVmdDogJHt0cmFja09mZnNldFB4fXB4O1xuICAgIHRvcDogJHt0cmFja09mZnNldFB4fXB4O1xuICAgIGhlaWdodDogJHtrbm9iU2l6ZVB4fXB4O1xuICAgIHdpZHRoOiAke2tub2JTaXplUHh9cHg7XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1rbm9iQ29sb3IpO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCh2YXIoLS1rbm9iVHJhbnNsYXRlKSk7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JuLXRyYW5zaXRpb24tbGVhdmUpIHRyYW5zZm9ybTtcbiAgfVxuXG4gICY6aG92ZXI6YWZ0ZXIsXG4gICY6Y2hlY2tlZDpob3ZlcjphZnRlciB7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JuLXRyYW5zaXRpb24taG92ZXIpIHRyYW5zZm9ybTtcbiAgfVxuXG4gICY6Y2hlY2tlZDpob3ZlcjphZnRlciB7XG4gICAgLS1rbm9iVHJhbnNsYXRlOiAke2tub2JBY3RpdmVQb3NpdGlvblB4fXB4O1xuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdzaGFkZTcnKX07XG4gIH1cblxuICAmOmNoZWNrZWQge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuXG4gICY6Y2hlY2tlZDpob3ZlciB7XG4gICAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdzaGFkZTgnKX07XG4gIH1cblxuICAmOmNoZWNrZWQ6YWZ0ZXIge1xuICAgIC0ta25vYlRyYW5zbGF0ZTogJHtrbm9iQWN0aXZlUG9zaXRpb25QeH1weDtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignc2hhZGU1Jyl9O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgJjpjaGVja2VkIHtcbiAgICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignc2hhZGU3Jyl9O1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG4gICR7KHsgaGFzVGV4dCB9KSA9PlxuICAgIGhhc1RleHQgJiZcbiAgICBgXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgIGNvbHVtbi1nYXA6ICR7Z2V0U3BhY2UoJ3ZhcigtLWdybi1mb3JtLWNvbnRyb2wtbGFiZWwtZ2FwKScpfTtcbiAgYH07XG5cbiAgLnN3aXRjaExhYmVsLFxuICAuc3dpdGNoSGludCB7XG4gICAgZ3JpZC1jb2x1bW46IDIgLyAzO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3dpdGNoID0gZm9yd2FyZFJlZihmdW5jdGlvbiBTd2l0Y2goXG4gIHsgaXNEaXNhYmxlZCwgaXNBY3RpdmUsIGxhYmVsLCBoaW50LCBpZCwgb25DaGFuZ2UsIC4uLnByb3BzIH0sXG4gIHJlZixcbikge1xuICByZXR1cm4gKFxuICAgIDxSb290IGhhc1RleHQ9e2xhYmVsIHx8IGhpbnR9IHsuLi5wcm9wc30+XG4gICAgICA8SW5wdXRcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIGNoZWNrZWQ9e2lzQWN0aXZlfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAvPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPEZpZWxkTGFiZWwgaHRtbEZvcj17aWR9IGNsYXNzTmFtZT1cInN3aXRjaExhYmVsXCI+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0ZpZWxkTGFiZWw+XG4gICAgICApfVxuICAgICAge2hpbnQgJiYgPEZpZWxkSGludCBjbGFzc05hbWU9XCJzd2l0Y2hIaW50XCI+e2hpbnR9PC9GaWVsZEhpbnQ+fVxuICAgIDwvUm9vdD5cbiAgKTtcbn0pO1xuXG5Td2l0Y2guTGFiZWwgPSBGaWVsZExhYmVsO1xuXG5Td2l0Y2gucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBoaW50OiB0eXBlcy5oaW50LFxufTtcbiJdfQ== */"));
|
|
23
23
|
const Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
24
24
|
target: "ez8kn7b0"
|
|
25
25
|
} : {
|
|
@@ -30,7 +30,7 @@ const Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ?
|
|
|
30
30
|
hasText
|
|
31
31
|
} = _ref;
|
|
32
32
|
return hasText && "\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n width: fit-content;\n column-gap: ".concat(getSpace('var(--grn-form-control-label-gap)'), ";\n ");
|
|
33
|
-
}, ";.switchLabel,.switchHint{grid-column:2/3;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
+
}, ";.switchLabel,.switchHint{grid-column:2/3;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0Z1QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zd2l0Y2guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNwYWNlLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IEZpZWxkSGludCwgRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3Qga25vYlNpemVQeCA9IDE2O1xuY29uc3QgdHJhY2tPZmZzZXRQeCA9IDI7XG5jb25zdCB0cmFja1dpZHRoUHggPSAzMjtcbmNvbnN0IHRyYWNrSGVpZ2h0UHggPSBrbm9iU2l6ZVB4ICsgdHJhY2tPZmZzZXRQeCAqIDI7XG5jb25zdCBrbm9iQWN0aXZlUG9zaXRpb25QeCA9IHRyYWNrV2lkdGhQeCAtIGtub2JTaXplUHggLSB0cmFja09mZnNldFB4ICogMjtcblxuY29uc3QgSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignc2hhZGU2Jyl9O1xuICAtLWtub2JDb2xvcjogJHtnZXRDb2xvcignc2hhZGUxJyl9O1xuICAtLWtub2JUcmFuc2xhdGU6IDA7XG5cbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgaGVpZ2h0OiAke3RyYWNrSGVpZ2h0UHh9cHg7XG4gIHdpZHRoOiAke3RyYWNrV2lkdGhQeH1weDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6ICR7dHJhY2tIZWlnaHRQeCAvIDJ9cHg7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBtYXJnaW46IDA7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHJhY2tDb2xvcik7XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGxlZnQ6ICR7dHJhY2tPZmZzZXRQeH1weDtcbiAgICB0b3A6ICR7dHJhY2tPZmZzZXRQeH1weDtcbiAgICBoZWlnaHQ6ICR7a25vYlNpemVQeH1weDtcbiAgICB3aWR0aDogJHtrbm9iU2l6ZVB4fXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0ta25vYkNvbG9yKTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgodmFyKC0ta25vYlRyYW5zbGF0ZSkpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWxlYXZlKSB0cmFuc2Zvcm07XG4gIH1cblxuICAmOmhvdmVyOmFmdGVyLFxuICAmOmNoZWNrZWQ6aG92ZXI6YWZ0ZXIge1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWhvdmVyKSB0cmFuc2Zvcm07XG4gIH1cblxuICAmOmNoZWNrZWQ6aG92ZXI6YWZ0ZXIge1xuICAgIC0ta25vYlRyYW5zbGF0ZTogJHtrbm9iQWN0aXZlUG9zaXRpb25QeH1weDtcbiAgfVxuXG4gICY6aG92ZXIge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignc2hhZGU3Jyl9O1xuICB9XG5cbiAgJjpjaGVja2VkIHtcbiAgICAtLXRyYWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnQnKX07XG4gIH1cblxuICAmOmNoZWNrZWQ6aG92ZXIge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignc2hhZGU4Jyl9O1xuICB9XG5cbiAgJjpjaGVja2VkOmFmdGVyIHtcbiAgICAtLWtub2JUcmFuc2xhdGU6ICR7a25vYkFjdGl2ZVBvc2l0aW9uUHh9cHg7XG4gIH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLXRyYWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlNScpfTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcblxuICAgICY6Y2hlY2tlZCB7XG4gICAgICAtLXRyYWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlNycpfTtcbiAgICB9XG4gIH1cbmA7XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuICAkeyh7IGhhc1RleHQgfSkgPT5cbiAgICBoYXNUZXh0ICYmXG4gICAgYFxuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBjb2x1bW4tZ2FwOiAke2dldFNwYWNlKCd2YXIoLS1ncm4tZm9ybS1jb250cm9sLWxhYmVsLWdhcCknKX07XG4gIGB9O1xuXG4gIC5zd2l0Y2hMYWJlbCxcbiAgLnN3aXRjaEhpbnQge1xuICAgIGdyaWQtY29sdW1uOiAyIC8gMztcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFN3aXRjaCA9IGZvcndhcmRSZWYoZnVuY3Rpb24gU3dpdGNoKFxuICB7IGlzRGlzYWJsZWQsIGlzQWN0aXZlLCBsYWJlbCwgaGludCwgaWQsIG9uQ2hhbmdlLCAuLi5wcm9wcyB9LFxuICByZWYsXG4pIHtcbiAgcmV0dXJuIChcbiAgICA8Um9vdCBoYXNUZXh0PXtsYWJlbCB8fCBoaW50fSB7Li4ucHJvcHN9PlxuICAgICAgPElucHV0XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWQ9e2lkfVxuICAgICAgICBjaGVja2VkPXtpc0FjdGl2ZX1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgLz5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfSBjbGFzc05hbWU9XCJzd2l0Y2hMYWJlbFwiPlxuICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgPC9GaWVsZExhYmVsPlxuICAgICAgKX1cbiAgICAgIHtoaW50ICYmIDxGaWVsZEhpbnQgY2xhc3NOYW1lPVwic3dpdGNoSGludFwiPntoaW50fTwvRmllbGRIaW50Pn1cbiAgICA8L1Jvb3Q+XG4gICk7XG59KTtcblxuU3dpdGNoLkxhYmVsID0gRmllbGRMYWJlbDtcblxuU3dpdGNoLnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBsYWJlbDogUHJvcFR5cGVzLnN0cmluZyxcbiAgaGludDogdHlwZXMuaGludCxcbn07XG4iXX0= */"));
|
|
34
34
|
export const Switch = /*#__PURE__*/forwardRef(function Switch(_ref2, ref) {
|
|
35
35
|
let {
|
|
36
36
|
isDisabled,
|
|
@@ -8,17 +8,17 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
|
|
|
8
8
|
import { Box, Icon, Spinner, Text } from '../components';
|
|
9
9
|
import { forwardRef } from 'react';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import {
|
|
11
|
+
import { buttonResetStyles, clearButtonVariantStyles, transitionStyles } from '../foundational';
|
|
12
12
|
import { types } from '../types';
|
|
13
13
|
import { keyframes } from '@emotion/react';
|
|
14
|
-
import { getTransition } from '../utilities';
|
|
14
|
+
import { getColor, getRadius, getTransition } from '../utilities';
|
|
15
15
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
16
16
|
const xPadding = "8px";
|
|
17
17
|
const xPaddingNegative = "-".concat(xPadding);
|
|
18
18
|
const trimSideStyles = {
|
|
19
19
|
left: "\n margin-left: ".concat(xPaddingNegative, ";\n max-width: calc(100% + ").concat(xPadding, ");\n "),
|
|
20
20
|
right: "\n margin-right: ".concat(xPaddingNegative, ";\n max-width: calc(100% + ").concat(xPadding, ");\n "),
|
|
21
|
-
x: "\n margin-
|
|
21
|
+
x: "\n margin-inline: ".concat(xPaddingNegative, ";\n max-width: calc(100% + ").concat(xPadding, " * 2);\n ")
|
|
22
22
|
};
|
|
23
23
|
const fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from { opacity: 0 }\n"])));
|
|
24
24
|
const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
|
|
@@ -26,18 +26,43 @@ const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "product
|
|
|
26
26
|
} : {
|
|
27
27
|
target: "e1jnb1460",
|
|
28
28
|
label: "Wrapper"
|
|
29
|
-
})("position:relative;
|
|
29
|
+
})(buttonResetStyles, ";border:none;height:var(--grn-clearbutton-height);background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;padding:0 ", xPadding, ";gap:8px;min-width:0;", _ref => {
|
|
30
30
|
let {
|
|
31
31
|
trimSide
|
|
32
32
|
} = _ref;
|
|
33
33
|
return trimSide ? trimSideStyles[trimSide] : "max-width: 100%";
|
|
34
|
-
}, "
|
|
34
|
+
}, ";color:", _ref2 => {
|
|
35
35
|
let {
|
|
36
|
-
|
|
36
|
+
vc
|
|
37
37
|
} = _ref2;
|
|
38
|
+
return vc.color;
|
|
39
|
+
}, ";&:before{content:'';position:absolute;border-radius:", getRadius('s'), ";inset:1px -2px;", transitionStyles, ";}.Icon{", p => p.iconPosition === 'right' && "order: 1", ";color:", _ref3 => {
|
|
40
|
+
let {
|
|
41
|
+
vc
|
|
42
|
+
} = _ref3;
|
|
43
|
+
return vc.iconColor;
|
|
44
|
+
}, ";", transitionStyles, ";}.buttonText{z-index:1;}&:disabled{pointer-events:none;color:", getColor('disabledContent'), ";.Icon{color:", getColor('disabledIcon'), ";}}.buttonSpinner{animation:", fadeIn, " ", getTransition('fast'), ";}", _ref4 => {
|
|
45
|
+
let {
|
|
46
|
+
hasSpinner
|
|
47
|
+
} = _ref4;
|
|
38
48
|
return hasSpinner && "\n .buttonText,\n .Icon {\n transition: opacity ".concat(getTransition('fast'), ";\n opacity: 0;\n }\n ");
|
|
39
|
-
}, "
|
|
40
|
-
|
|
49
|
+
}, "@media (hover: hover){&:hover{&:before{background-color:", _ref5 => {
|
|
50
|
+
let {
|
|
51
|
+
vc
|
|
52
|
+
} = _ref5;
|
|
53
|
+
return vc.hover.backgroundColor;
|
|
54
|
+
}, ";}.Icon{color:", _ref6 => {
|
|
55
|
+
let {
|
|
56
|
+
vc
|
|
57
|
+
} = _ref6;
|
|
58
|
+
return vc.hover.iconColor;
|
|
59
|
+
}, ";}}&:active:before{background-color:", _ref7 => {
|
|
60
|
+
let {
|
|
61
|
+
vc
|
|
62
|
+
} = _ref7;
|
|
63
|
+
return vc.active.backgroundColor;
|
|
64
|
+
}, ";transition:var(--grn-transition-active);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtYnV0dG9uLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgSWNvbiwgU3Bpbm5lciwgVGV4dCB9IGZyb20gJy4uL2NvbXBvbmVudHMnO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBidXR0b25SZXNldFN0eWxlcywgY2xlYXJCdXR0b25WYXJpYW50U3R5bGVzLCB0cmFuc2l0aW9uU3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5cbmNvbnN0IHhQYWRkaW5nID0gYDhweGA7XG5jb25zdCB4UGFkZGluZ05lZ2F0aXZlID0gYC0ke3hQYWRkaW5nfWA7XG5cbmNvbnN0IHRyaW1TaWRlU3R5bGVzID0ge1xuICBsZWZ0OiBgXG4gICAgbWFyZ2luLWxlZnQ6ICR7eFBhZGRpbmdOZWdhdGl2ZX07XG4gICAgbWF4LXdpZHRoOiBjYWxjKDEwMCUgKyAke3hQYWRkaW5nfSk7XG4gIGAsXG4gIHJpZ2h0OiBgXG4gICAgbWFyZ2luLXJpZ2h0OiAke3hQYWRkaW5nTmVnYXRpdmV9O1xuICAgIG1heC13aWR0aDogY2FsYygxMDAlICsgJHt4UGFkZGluZ30pO1xuICBgLFxuICB4OiBgXG4gICAgbWFyZ2luLWlubGluZTogJHt4UGFkZGluZ05lZ2F0aXZlfTtcbiAgICBtYXgtd2lkdGg6IGNhbGMoMTAwJSArICR7eFBhZGRpbmd9ICogMik7XG4gIGAsXG59O1xuXG5jb25zdCBmYWRlSW4gPSBrZXlmcmFtZXNgXG4gIGZyb20geyBvcGFjaXR5OiAwIH1cbmA7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke2J1dHRvblJlc2V0U3R5bGVzfTtcblxuICBib3JkZXI6IG5vbmU7XG4gIGhlaWdodDogdmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBwYWRkaW5nOiAwICR7eFBhZGRpbmd9O1xuICBnYXA6IDhweDtcbiAgbWluLXdpZHRoOiAwO1xuICAkeyh7IHRyaW1TaWRlIH0pID0+ICh0cmltU2lkZSA/IHRyaW1TaWRlU3R5bGVzW3RyaW1TaWRlXSA6IGBtYXgtd2lkdGg6IDEwMCVgKX07XG4gIGNvbG9yOiAkeyh7IHZjIH0pID0+IHZjLmNvbG9yfTtcblxuICAmOmJlZm9yZSB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgIGluc2V0OiAxcHggLTJweDtcbiAgICAke3RyYW5zaXRpb25TdHlsZXN9O1xuICB9XG5cbiAgLkljb24ge1xuICAgICR7cCA9PiBwLmljb25Qb3NpdGlvbiA9PT0gJ3JpZ2h0JyAmJiBgb3JkZXI6IDFgfTtcbiAgICBjb2xvcjogJHsoeyB2YyB9KSA9PiB2Yy5pY29uQ29sb3J9O1xuICAgICR7dHJhbnNpdGlvblN0eWxlc307XG4gIH1cblxuICAuYnV0dG9uVGV4dCB7XG4gICAgei1pbmRleDogMTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX07XG5cbiAgICAuSWNvbiB7XG4gICAgICBjb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRJY29uJyl9O1xuICAgIH1cbiAgfVxuXG4gIC5idXR0b25TcGlubmVyIHtcbiAgICBhbmltYXRpb246ICR7ZmFkZUlufSAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG4gIH1cblxuICAkeyh7IGhhc1NwaW5uZXIgfSkgPT5cbiAgICBoYXNTcGlubmVyICYmXG4gICAgYFxuICAgIC5idXR0b25UZXh0LFxuICAgIC5JY29uIHtcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuICAgICAgb3BhY2l0eTogMDtcbiAgICB9XG4gIGB9XG5cbiAgQG1lZGlhIChob3ZlcjogaG92ZXIpIHtcbiAgICAmOmhvdmVyIHtcbiAgICAgICY6YmVmb3JlIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB2YyB9KSA9PiB2Yy5ob3Zlci5iYWNrZ3JvdW5kQ29sb3J9O1xuICAgICAgfVxuXG4gICAgICAuSWNvbiB7XG4gICAgICAgIGNvbG9yOiAkeyh7IHZjIH0pID0+IHZjLmhvdmVyLmljb25Db2xvcn07XG4gICAgICB9XG4gICAgfVxuICAgICY6YWN0aXZlOmJlZm9yZSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHZjIH0pID0+IHZjLmFjdGl2ZS5iYWNrZ3JvdW5kQ29sb3J9O1xuICAgICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JuLXRyYW5zaXRpb24tYWN0aXZlKTtcbiAgICB9XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0QnV0dG9uID0gZm9yd2FyZFJlZihmdW5jdGlvbiBUZXh0QnV0dG9uKFxuICB7XG4gICAgY2hpbGRyZW4sXG4gICAgaXNEaXNhYmxlZCxcbiAgICBpY29uLFxuICAgIGljb25Qb3NpdGlvbiA9ICdsZWZ0JyxcbiAgICB2YXJpYW50ID0gJ25ldXRyYWwnLFxuICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICB0cmltU2lkZSxcbiAgICBoYXNTcGlubmVyLFxuICAgIC4uLnByb3BzXG4gIH0sXG4gIHJlZixcbikge1xuICBjb25zdCB2YXJpYW50Q29sb3JzID0gY2xlYXJCdXR0b25WYXJpYW50U3R5bGVzW3ZhcmlhbnRdO1xuXG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXJcbiAgICAgIHR5cGU9e3R5cGV9XG4gICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgIGljb249e2ljb259XG4gICAgICBpY29uUG9zaXRpb249e2ljb25Qb3NpdGlvbn1cbiAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIHRyaW1TaWRlPXt0cmltU2lkZX1cbiAgICAgIGhhc1NwaW5uZXI9e2hhc1NwaW5uZXJ9XG4gICAgICB2Yz17dmFyaWFudENvbG9yc31cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSAvPn1cbiAgICAgIHtjaGlsZHJlbiAmJiAoXG4gICAgICAgIDxUZXh0IGhhc0VsbGlwc2lzIGNsYXNzTmFtZT1cImJ1dHRvblRleHRcIj5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvVGV4dD5cbiAgICAgICl9XG4gICAgICB7aGFzU3Bpbm5lciAmJiAoXG4gICAgICAgIDxCb3ggcG9zaXRpb249XCJhYnNvbHV0ZVwiIGNsYXNzTmFtZT1cImJ1dHRvblNwaW5uZXJcIj5cbiAgICAgICAgICA8U3Bpbm5lciBjb2xvcj1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59KTtcblxuVGV4dEJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb25Qb3NpdGlvbjogdHlwZXMuaWNvblBvc2l0aW9uLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIHZhcmlhbnQ6IHR5cGVzLmNsZWFyQnV0dG9uVmFyaWFudCxcbiAgdHlwZTogdHlwZXMuYnV0dG9uVHlwZSxcbiAgdHJpbVNpZGU6IFByb3BUeXBlcy5vbmVPZihbJ2xlZnQnLCAncmlnaHQnLCAneCddKSxcbiAgaGFzU3Bpbm5lcjogUHJvcFR5cGVzLmJvb2wsXG59O1xuIl19 */"));
|
|
65
|
+
export const TextButton = /*#__PURE__*/forwardRef(function TextButton(_ref8, ref) {
|
|
41
66
|
let {
|
|
42
67
|
children,
|
|
43
68
|
isDisabled,
|
|
@@ -47,12 +72,9 @@ export const TextButton = /*#__PURE__*/forwardRef(function TextButton(_ref3, ref
|
|
|
47
72
|
type = 'button',
|
|
48
73
|
trimSide,
|
|
49
74
|
hasSpinner
|
|
50
|
-
} =
|
|
51
|
-
props = _objectWithoutProperties(
|
|
52
|
-
const
|
|
53
|
-
variant,
|
|
54
|
-
isDisabled
|
|
55
|
-
});
|
|
75
|
+
} = _ref8,
|
|
76
|
+
props = _objectWithoutProperties(_ref8, _excluded);
|
|
77
|
+
const variantColors = clearButtonVariantStyles[variant];
|
|
56
78
|
return ___EmotionJSX(Wrapper, _extends({
|
|
57
79
|
type: type,
|
|
58
80
|
disabled: isDisabled,
|
|
@@ -62,7 +84,7 @@ export const TextButton = /*#__PURE__*/forwardRef(function TextButton(_ref3, ref
|
|
|
62
84
|
ref: ref,
|
|
63
85
|
trimSide: trimSide,
|
|
64
86
|
hasSpinner: hasSpinner,
|
|
65
|
-
|
|
87
|
+
vc: variantColors
|
|
66
88
|
}, props), icon && ___EmotionJSX(Icon, {
|
|
67
89
|
icon: icon
|
|
68
90
|
}), children && ___EmotionJSX(Text, {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { getColor, getRadius, getTextSize, getWeight } from '../utilities';
|
|
2
2
|
export const capHeight = "0.74em";
|
|
3
3
|
export const lineHeightAndCapHeightOffset = "calc((var(--grn-lineHeight-global) - ".concat(capHeight, ") / 2)");
|
|
4
|
-
const buttonResetStyles = "\n appearance: none;\n font-family: inherit;\n font-size: inherit;\n font-weight: ".concat(getWeight('medium'), ";\n cursor: pointer;\n");
|
|
4
|
+
export const buttonResetStyles = "\n appearance: none;\n font-family: inherit;\n font-size: inherit;\n font-weight: ".concat(getWeight('medium'), ";\n cursor: pointer;\n");
|
|
5
5
|
export const transitionStyles = "\n transition: var(--grn-transition-leave);\n\n &:hover {\n transition: var(--grn-transition-hover);\n }\n\n &:active {\n transition: var(--grn-transition-active);\n }\n";
|
|
6
6
|
export const styles = {
|
|
7
7
|
buttonReset: buttonResetStyles,
|
|
8
8
|
transitions: transitionStyles
|
|
9
9
|
};
|
|
10
|
-
const
|
|
10
|
+
export const clearButtonVariantStyles = {
|
|
11
11
|
neutral: {
|
|
12
12
|
color: getColor('content'),
|
|
13
13
|
iconColor: getColor('icon'),
|
|
@@ -37,9 +37,9 @@ export const getClearButtonStyles = _ref => {
|
|
|
37
37
|
isActive,
|
|
38
38
|
isDisabled
|
|
39
39
|
} = _ref;
|
|
40
|
-
const box = "\n ".concat(buttonResetStyles, ";\n ").concat(transitionStyles, ";\n\n border: none;\n padding: 0;\n border-radius: ").concat(getRadius('s'), ";\n height: var(--grn-clearbutton-height);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media(hover: hover) {\n &:hover {\n background-color: ").concat(variant &&
|
|
41
|
-
const icon = "\n ".concat(transitionStyles, ";\n color: ").concat(variant &&
|
|
42
|
-
const text = "\n color: ".concat(variant &&
|
|
40
|
+
const box = "\n ".concat(buttonResetStyles, ";\n ").concat(transitionStyles, ";\n\n border: none;\n padding: 0;\n border-radius: ").concat(getRadius('s'), ";\n height: var(--grn-clearbutton-height);\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @media(hover: hover) {\n &:hover {\n background-color: ").concat(variant && clearButtonVariantStyles[variant].hover.backgroundColor, ";\n\n .Icon {\n color: ").concat(variant && clearButtonVariantStyles[variant].hover.iconColor, ";\n }\n }\n &:active {\n background-color: ").concat(variant && clearButtonVariantStyles[variant].active.backgroundColor, ";\n }\n }\n\n ").concat(isDisabled && "pointer-events: none; ", "\n ");
|
|
41
|
+
const icon = "\n ".concat(transitionStyles, ";\n color: ").concat(variant && clearButtonVariantStyles[variant].iconColor, ";\n ").concat(isActive && "color: ".concat(variant && clearButtonVariantStyles[variant].color), ";\n ").concat(isDisabled && "color: ".concat(getColor('disabledIcon')), ";\n ");
|
|
42
|
+
const text = "\n color: ".concat(variant && clearButtonVariantStyles[variant].color, ";\n ").concat(isDisabled && "color: ".concat(getColor('disabledContent')), ";\n ");
|
|
43
43
|
const clearButtonStyles = {
|
|
44
44
|
box,
|
|
45
45
|
icon,
|