@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
812 lines (667 loc) • 28 kB
JavaScript
import { a as _taggedTemplateLiteral, c as _slicedToArray, b as _objectSpread2, d as _objectWithoutProperties } from './anchor-chunk-7b9d8557.js';
import { a as __rest } from './anchor-chunk-27f34e54.js';
import { a as rem } from './anchor-chunk-cd7ef49a.js';
import { a as cloneWithProps } from './anchor-chunk-20e4020f.js';
import { transparentize } from 'polished';
import { forwardRef, createElement, useContext, useState, Children, Fragment, useEffect, useRef, createRef, Component, cloneElement, useReducer, PureComponent, isValidElement, createContext, useImperativeHandle } from 'react';
import classNames from 'classnames';
import styled, { css, ThemeContext } from '@xstyled/styled-components';
import { variant, th, space } from '@xstyled/system';
var REVEAL_BACKGROUND_COLOR = '#F1F1F1';
var REVEAL_COLOR = '#595959';
var TRANSITION_SPEED = '500ms'; // milliseconds
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n border-top-right-radius: base;\n border-bottom-left-radius: base;\n width: 1.25rem;\n height: 1.25rem;\n "]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n border-top-right-radius: circular;\n border-bottom-left-radius: circular;\n width: ", "rem;\n height: ", "rem;\n "]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n right: -1px;\n content: '';\n\n ", ";\n\n transition: ", " ease opacity;\n background: linear-gradient(\n 45deg,\n ", ",\n ", " 50%,\n ", " 0\n );\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var StyledFlip = styled('div')(_templateObject(), function (_ref) {
var circular = _ref.circular,
height = _ref.height;
return circular ? css(_templateObject2(), height / 2, height / 2) : css(_templateObject3());
}, TRANSITION_SPEED, function (_ref2) {
var flipColor = _ref2.flipColor;
return flipColor;
}, function (_ref3) {
var flipColor = _ref3.flipColor;
return flipColor;
}, REVEAL_BACKGROUND_COLOR);
var Flip = function Flip(_ref4) {
var circular = _ref4.circular,
colorTheme = _ref4.colorTheme,
height = _ref4.height;
return createElement(Fragment, null, createElement(StyledFlip, {
circular: circular,
flipColor: colorTheme.base,
height: height
}), createElement(StyledFlip, {
circular: circular,
className: "flip-base",
flipColor: colorTheme.light,
height: height
}));
};
function _templateObject$1() {
var data = _taggedTemplateLiteral(["\n position: absolute;\n\n // overlap border\n top: -1px;\n left: -1px;\n right: -1px;\n bottom: -1px;\n\n // expand using margin to get to 3 rem tall and wide\n margin: ", ";\n"]);
_templateObject$1 = function _templateObject() {
return data;
};
return data;
}
var HitArea = styled('div')(_templateObject$1(), function (_ref) {
var buttonHeight = _ref.buttonHeight,
buttonWidth = _ref.buttonWidth;
return "-".concat((3 - buttonHeight) / 2, "rem ").concat(buttonWidth && buttonWidth < 3 ? "-".concat((3 - buttonWidth) / 2, "rem") : '0');
});
function _templateObject36() {
var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: solid thin ", ";\n color: ", ";\n font-weight: bold;\n "]);
_templateObject36 = function _templateObject36() {
return data;
};
return data;
}
function _templateObject35() {
var data = _taggedTemplateLiteral(["\n & > .flip-base {\n opacity: 0;\n }\n "]);
_templateObject35 = function _templateObject35() {
return data;
};
return data;
}
function _templateObject34() {
var data = _taggedTemplateLiteral(["\n ", "\n ", "\n\n ", "\n ", "\n ", "\n "]);
_templateObject34 = function _templateObject34() {
return data;
};
return data;
}
function _templateObject33() {
var data = _taggedTemplateLiteral(["\n & > .flip-base {\n opacity: 0;\n }\n "]);
_templateObject33 = function _templateObject33() {
return data;
};
return data;
}
function _templateObject32() {
var data = _taggedTemplateLiteral(["\n &:hover,\n &:focus,\n &:active {\n ", "\n ", "\n }\n &:active {\n ", "\n }\n &:focus {\n ", "\n }\n\n ", "\n "]);
_templateObject32 = function _templateObject32() {
return data;
};
return data;
}
function _templateObject31() {
var data = _taggedTemplateLiteral(["\n min-width: ", ";\n "]);
_templateObject31 = function _templateObject31() {
return data;
};
return data;
}
function _templateObject30() {
var data = _taggedTemplateLiteral(["\n width: 100%;\n "]);
_templateObject30 = function _templateObject30() {
return data;
};
return data;
}
function _templateObject29() {
var data = _taggedTemplateLiteral(["\n font-size: ", ";\n height: ", ";\n "]);
_templateObject29 = function _templateObject29() {
return data;
};
return data;
}
function _templateObject28() {
var data = _taggedTemplateLiteral(["\n ", ";\n cursor: not-allowed;\n "]);
_templateObject28 = function _templateObject28() {
return data;
};
return data;
}
function _templateObject27() {
var data = _taggedTemplateLiteral(["\n position: relative;\n ", ";\n\tfont-weight: 600;\n\tfont-family: base;\n\ttext-align: center;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n outline: none !important;\n\n\ttransition: ", " ease background-color,\n ", " ease border-color,\n ", " ease color,\n ", " ease fill;\n\n // These properties are deprecated but help make white text\n // on colored backgrounds look more crisp in Chrome and Firefox.\n\t-webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n /* Base and Disabled Styles */\n ", "\n\n /* Sizing */\n ", "\n\n\n ", "\n\n /* State styles */\n ", "\n\n &:focus {\n ", "\n }\n\n /* Revealed State */\n ", "\n\n ", "\n"]);
_templateObject27 = function _templateObject27() {
return data;
};
return data;
}
function _templateObject26() {
var data = _taggedTemplateLiteral(["\n &:after {\n position: absolute;\n content: '';\n\n // overlap border (1px) and extend 2px past\n // TODO: determine approach for spacing with larger than 1px borders\n top: -3px;\n left: -3px;\n right: -3px;\n bottom: -3px;\n\n border-radius: calc(", " + 2px);\n\n // shadow instead of border so that it doesn't contribute to clickable area\n ", "\n }\n "]);
_templateObject26 = function _templateObject26() {
return data;
};
return data;
}
function _templateObject25() {
var data = _taggedTemplateLiteral(["\n box-shadow: 0 0 0 2px\n ", ";\n "]);
_templateObject25 = function _templateObject25() {
return data;
};
return data;
}
function _templateObject24() {
var data = _taggedTemplateLiteral(["\n box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);\n "]);
_templateObject24 = function _templateObject24() {
return data;
};
return data;
}
function _templateObject23() {
var data = _taggedTemplateLiteral(["\n background: ", ";\n "]);
_templateObject23 = function _templateObject23() {
return data;
};
return data;
}
function _templateObject22() {
var data = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n "]);
_templateObject22 = function _templateObject22() {
return data;
};
return data;
}
function _templateObject21() {
var data = _taggedTemplateLiteral(["\n background: ", ";\n color: ", ";\n "]);
_templateObject21 = function _templateObject21() {
return data;
};
return data;
}
function _templateObject20() {
var data = _taggedTemplateLiteral(["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n "]);
_templateObject20 = function _templateObject20() {
return data;
};
return data;
}
function _templateObject19() {
var data = _taggedTemplateLiteral(["\n border: solid thin transparent;\n background-color: transparent;\n color: ", ";\n "]);
_templateObject19 = function _templateObject19() {
return data;
};
return data;
}
function _templateObject18() {
var data = _taggedTemplateLiteral(["\n border: solid thin transparent;\n background-color: transparent;\n color: ", ";\n "]);
_templateObject18 = function _templateObject18() {
return data;
};
return data;
}
function _templateObject17() {
var data = _taggedTemplateLiteral(["\n box-shadow: 0 0 0 2px\n ", ";\n "]);
_templateObject17 = function _templateObject17() {
return data;
};
return data;
}
function _templateObject16() {
var data = _taggedTemplateLiteral(["\n box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);\n "]);
_templateObject16 = function _templateObject16() {
return data;
};
return data;
}
function _templateObject15() {
var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: solid thin ", ";\n color: white;\n "]);
_templateObject15 = function _templateObject15() {
return data;
};
return data;
}
function _templateObject14() {
var data = _taggedTemplateLiteral(["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n "]);
_templateObject14 = function _templateObject14() {
return data;
};
return data;
}
function _templateObject13() {
var data = _taggedTemplateLiteral(["\n border: solid thin ", ";\n background-color: transparent;\n color: ", ";\n "]);
_templateObject13 = function _templateObject13() {
return data;
};
return data;
}
function _templateObject12() {
var data = _taggedTemplateLiteral(["\n opacity: 0.5;\n border: solid thin ", ";\n background-color: transparent;\n color: ", ";\n "]);
_templateObject12 = function _templateObject12() {
return data;
};
return data;
}
function _templateObject11() {
var data = _taggedTemplateLiteral(["\n border: solid thin ", ";\n background-color: transparent;\n color: ", ";\n "]);
_templateObject11 = function _templateObject11() {
return data;
};
return data;
}
function _templateObject10() {
var data = _taggedTemplateLiteral(["\n box-shadow: 0 0 0 2px\n ", ";\n "]);
_templateObject10 = function _templateObject10() {
return data;
};
return data;
}
function _templateObject9() {
var data = _taggedTemplateLiteral(["\n box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);\n "]);
_templateObject9 = function _templateObject9() {
return data;
};
return data;
}
function _templateObject8() {
var data = _taggedTemplateLiteral(["\n border: solid thin white;\n background-color: white;\n "]);
_templateObject8 = function _templateObject8() {
return data;
};
return data;
}
function _templateObject7() {
var data = _taggedTemplateLiteral(["\n border: solid thin white;\n background-color: white;\n "]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = _taggedTemplateLiteral(["\n background-color: ", ";\n border: solid thin ", ";\n "]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = _taggedTemplateLiteral(["\n border: solid thin rgba(255, 255, 255, 0.85);\n background-color: rgba(255, 255, 255, 0.85);\n color: ", ";\n "]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n border: solid thin ", ";\n background-color: ", ";\n color: ", ";\n "]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3$1() {
var data = _taggedTemplateLiteral(["\n border: solid thin white;\n background-color: white;\n color: ", ";\n opacity: 0.5;\n "]);
_templateObject3$1 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2$1() {
var data = _taggedTemplateLiteral(["\n border: solid thin ", ";\n background-color: ", ";\n color: white;\n "]);
_templateObject2$1 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$2() {
var data = _taggedTemplateLiteral(["\n border: solid thin white;\n background-color: white;\n color: ", ";\n "]);
_templateObject$2 = function _templateObject() {
return data;
};
return data;
}
// a better solution.
// Basically a copy of 'ash'
var disabledColor = {
dark: '#808080',
light: '#D3D3D3'
}; // Just a copy of 'savvyCyan'
var primaryColor = {
base: '#0998D6',
light: '#66CCFF',
dark: '#0074A6'
}; // Just a copy of 'charcoal'
var grayColor = {
base: '#323232',
light: '#595959',
dark: '#000000'
};
var themeDefaults = {
filled: primaryColor,
outline: {
base: primaryColor.dark,
light: primaryColor.base,
dark: primaryColor.dark
},
minimal: {
base: primaryColor.dark,
light: primaryColor.base,
dark: primaryColor.dark
}
};
var reverseDefaults = {
filled: {
base: grayColor.light,
light: grayColor.light,
dark: grayColor.dark
},
outline: {
base: 'white',
light: 'white',
dark: grayColor.light
},
minimal: {
base: 'white',
light: 'white',
dark: 'white'
}
};
var BUTTON_KEY = 'buttons';
var BUTTON_THEME = {
sizes: {
xs: {
minWidth: 4,
height: 2,
padding: 0.5,
circularPadding: 1,
fontSize: 0.75,
affixSpacing: 0.375
},
sm: {
minWidth: 5,
height: 2.5,
padding: 1,
circularPadding: 1.5,
fontSize: 0.875,
affixSpacing: 0.375
},
md: {
minWidth: 12.5,
height: 3,
padding: 1.5,
circularPadding: 2,
fontSize: 1,
affixSpacing: 0.5
},
lg: {
minWidth: 12.5,
height: 3.5,
padding: 2,
circularPadding: 2.5,
fontSize: 1,
affixSpacing: 0.5
}
},
variants: {
filled: {
base: function base(_ref) {
var reverse = _ref.reverse,
colorTheme = _ref.colorTheme;
return reverse ? css(_templateObject$2(), colorTheme.base) : css(_templateObject2$1(), colorTheme.base, colorTheme.base);
},
disabled: function disabled(_ref2) {
var reverse = _ref2.reverse,
colorTheme = _ref2.colorTheme;
return reverse ? css(_templateObject3$1(), colorTheme.base) : css(_templateObject4(), disabledColor.light, disabledColor.light, disabledColor.dark);
},
hover: function hover(_ref3) {
var reverse = _ref3.reverse,
colorTheme = _ref3.colorTheme;
return reverse ? css(_templateObject5(), colorTheme.base) : css(_templateObject6(), colorTheme.dark, colorTheme.dark);
},
active: function active(_ref4) {
var reverse = _ref4.reverse;
return reverse ? css(_templateObject7()) : undefined;
},
focus: function focus(_ref5) {
var reverse = _ref5.reverse;
return reverse ? css(_templateObject8()) : undefined;
},
focusOutline: function focusOutline(_ref6) {
var reverse = _ref6.reverse,
colorTheme = _ref6.colorTheme;
return reverse ? css(_templateObject9()) : css(_templateObject10(), transparentize(0.6, colorTheme.base));
}
},
outline: {
base: function base(_ref7) {
var colorTheme = _ref7.colorTheme;
return css(_templateObject11(), colorTheme.base, colorTheme.base);
},
disabled: function disabled(_ref8) {
var reverse = _ref8.reverse,
colorTheme = _ref8.colorTheme;
return reverse ? css(_templateObject12(), colorTheme.base, colorTheme.base) : css(_templateObject13(), disabledColor.dark, disabledColor.dark);
},
hover: function hover(_ref9) {
var reverse = _ref9.reverse,
colorTheme = _ref9.colorTheme;
return reverse ? css(_templateObject14(), colorTheme.base, colorTheme.base, grayColor.light) : css(_templateObject15(), colorTheme.dark, colorTheme.dark);
},
focusOutline: function focusOutline(_ref10) {
var reverse = _ref10.reverse,
colorTheme = _ref10.colorTheme;
return reverse ? css(_templateObject16()) : css(_templateObject17(), transparentize(0.6, colorTheme.light));
}
},
minimal: {
base: function base(_ref11) {
var colorTheme = _ref11.colorTheme;
return css(_templateObject18(), colorTheme.base);
},
disabled: function disabled(_ref12) {
var reverse = _ref12.reverse;
return reverse ? css(_templateObject19(), disabledColor.dark) : css(_templateObject20(), disabledColor.light, disabledColor.light, disabledColor.dark);
},
hover: function hover(_ref13) {
var reverse = _ref13.reverse,
colorTheme = _ref13.colorTheme;
return reverse ? css(_templateObject21(), transparentize(0.84, colorTheme.base), colorTheme.base) : css(_templateObject22(), transparentize(0.84, disabledColor.dark), colorTheme.dark);
},
active: function active(_ref14) {
var reverse = _ref14.reverse,
colorTheme = _ref14.colorTheme;
return reverse ? css(_templateObject23(), transparentize(0.8, colorTheme.base)) : undefined;
},
focusOutline: function focusOutline(_ref15) {
var reverse = _ref15.reverse;
return reverse ? css(_templateObject24()) : css(_templateObject25(), transparentize(0.6, disabledColor.dark));
}
}
}
};
var sizeStyles = variant({
key: "".concat(BUTTON_KEY, ".sizes"),
prop: 'size',
"default": 'md',
variants: BUTTON_THEME.sizes
});
var stateStyles = variant({
key: "".concat(BUTTON_KEY, ".variants"),
prop: 'variant',
"default": 'filled',
variants: BUTTON_THEME.variants
});
var OutlineStyles = function OutlineStyles(_ref16) {
var buttonStyles = _ref16.buttonStyles,
borderRadius = _ref16.borderRadius;
return css(_templateObject26(), th.radius(borderRadius), buttonStyles.focusOutline);
};
var StyledButton = styled('button')(_templateObject27(), function (_ref17) {
var borderRadius = _ref17.borderRadius;
return css({
borderRadius: borderRadius
});
}, TRANSITION_SPEED, TRANSITION_SPEED, TRANSITION_SPEED, TRANSITION_SPEED, function (_ref18) {
var disabled = _ref18.disabled,
buttonStyles = _ref18.buttonStyles;
return disabled ? css(_templateObject28(), buttonStyles.disabled) : buttonStyles.base;
}, function (_ref19) {
var $fontSize = _ref19.$fontSize,
$height = _ref19.$height;
return css(_templateObject29(), rem($fontSize), rem($height));
}, function (_ref20) {
var minWidth = _ref20.minWidth,
block = _ref20.block;
return block ? css(_templateObject30()) : css(_templateObject31(), rem(minWidth));
}, function (_ref21) {
var disabled = _ref21.disabled,
revealed = _ref21.revealed,
flip = _ref21.flip,
forceHover = _ref21.forceHover,
forceFocus = _ref21.forceFocus,
forceActive = _ref21.forceActive,
buttonStyles = _ref21.buttonStyles,
props = _objectWithoutProperties(_ref21, ["disabled", "revealed", "flip", "forceHover", "forceFocus", "forceActive", "buttonStyles"]);
return !disabled && !revealed && css(_templateObject32(), buttonStyles.hover, flip && css(_templateObject33()), buttonStyles.active, buttonStyles.focus, (forceHover || forceFocus || forceActive) && css(_templateObject34(), buttonStyles.hover, flip && css(_templateObject35()), forceActive && buttonStyles.active, forceFocus && buttonStyles.focus, forceFocus && OutlineStyles(_objectSpread2({
buttonStyles: buttonStyles
}, props))));
}, OutlineStyles, function (_ref22) {
var variant$$1 = _ref22.variant,
revealed = _ref22.revealed;
return variant$$1 === 'filled' && revealed && css(_templateObject36(), REVEAL_BACKGROUND_COLOR, REVEAL_BACKGROUND_COLOR, REVEAL_COLOR);
}, space);
var Button = forwardRef(function (_a, ref) {
var className = _a.className,
_a$flip = _a.flip,
flip = _a$flip === void 0 ? false : _a$flip,
_a$variant = _a.variant,
variant$$1 = _a$variant === void 0 ? 'filled' : _a$variant,
_a$size = _a.size,
size = _a$size === void 0 ? 'md' : _a$size,
block = _a.block,
disabled = _a.disabled,
revealed = _a.revealed,
colorTheme = _a.colorTheme,
reverse = _a.reverse,
circular = _a.circular,
children = _a.children,
minWidth = _a.minWidth,
prefix = _a.prefix,
suffix = _a.suffix,
_onMouseDown = _a.onMouseDown,
_onMouseUp = _a.onMouseUp,
_onFocus = _a.onFocus,
props = __rest(_a, ["className", "flip", "variant", "size", "block", "disabled", "revealed", "colorTheme", "reverse", "circular", "children", "minWidth", "prefix", "suffix", "onMouseDown", "onMouseUp", "onFocus"]);
var theme = useContext(ThemeContext);
var _React$useState = useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
mouseDown = _React$useState2[0],
setMouseDown = _React$useState2[1]; // if there are no children and only prefix or only suffix are set
var iconOnly = (prefix ? !suffix : !!suffix) && Children.count(children) === 0;
if (flip && reverse) {
/* eslint-disable-next-line */
console.warn("Buttons should not have both 'flip' and 'reverse' props.");
}
if (flip && disabled) {
/* eslint-disable-next-line */
console.warn("Buttons with 'flip' are not meant to be 'disabled'. Did you mean to make it 'revealed'?");
}
if (iconOnly && minWidth) {
/* eslint-disable-next-line */
console.warn("Button is icon-only so 'minWidth' prop will be ignored.");
}
if (iconOnly && block) {
/* eslint-disable-next-line */
console.warn("Button is icon-only so 'block' prop will be ignored.");
}
if (block && minWidth) {
/* eslint-disable-next-line */
console.warn("Button has 'block' prop so 'minWidth' prop will be ignored.");
}
var iconScale = iconOnly ? size === 'xs' || size === 'sm' && variant$$1 === 'minimal' ? 'md' : 'lg' : 'md';
var dims = sizeStyles(Object.assign(Object.assign({}, props), {
size: size,
theme: theme
}));
var height = dims.height,
affixSpacing = dims.affixSpacing,
fontSize = dims.fontSize,
themeWidth = dims.minWidth; // Value just needs to be larger than the height
// to make the ends circular. We're using a very
// large radius so that it doesn't actually have
// to be calculated from the height.
var borderRadius = circular ? 'circular' : 'base';
var width = iconOnly ? height : minWidth || themeWidth;
if (!colorTheme) {
colorTheme = reverse ? reverseDefaults[variant$$1] : themeDefaults[variant$$1];
}
var padding = iconOnly ? '0' : "0 ".concat(circular ? dims.circularPadding : dims.padding, "rem");
var buttonStyles = stateStyles(Object.assign(Object.assign({}, props), {
colorTheme: colorTheme,
variant: variant$$1,
theme: theme
}));
return createElement(StyledButton, Object.assign({
onMouseDown: function onMouseDown(event) {
setMouseDown(true);
if (_onMouseDown) {
_onMouseDown(event);
}
},
onMouseUp: function onMouseUp(event) {
setMouseDown(false);
if (_onMouseUp) {
_onMouseUp(event);
}
},
onFocus: function onFocus(event) {
if (mouseDown) {
// This keeps the button from being :focused when
// clicked so that it is only applied when tabbed to.
// We want the outline to appear when tabbing for
// accessibility.
event.target.blur();
}
if (_onFocus) {
_onFocus(event);
}
},
className: classNames('anchor-button', className),
ref: ref,
flip: flip,
block: block,
colorTheme: colorTheme,
"$fontSize": fontSize,
padding: padding,
reverse: reverse,
minWidth: width,
"$height": height,
"$size": size,
iconOnly: iconOnly,
circular: circular,
variant: variant$$1,
disabled: disabled,
revealed: revealed,
borderRadius: borderRadius,
buttonStyles: buttonStyles
}, props), (height < 3 || width < 3) && createElement(HitArea, {
buttonHeight: height,
buttonWidth: width
}), prefix && cloneWithProps(prefix, {
scale: iconScale,
margin: iconOnly ? undefined : "0 ".concat(affixSpacing, "rem 0 0"),
className: 'anchor-button-prefix'
}), children, suffix && cloneWithProps(suffix, {
scale: iconScale,
margin: iconOnly ? undefined : "0 0 0 ".concat(affixSpacing, "rem"),
className: 'anchor-button-suffix'
}), flip && !disabled && !revealed && createElement(Flip, {
circular: circular,
colorTheme: colorTheme,
height: height
}));
});
export { Button as a, BUTTON_KEY as b, BUTTON_THEME as c };
//# sourceMappingURL=anchor-chunk-e1ca097b.js.map