@procore/core-react 11.22.0 → 11.23.0

package/dist/Button/Button.styles.js

@@ -1,111 +1,125 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled, { css } from 'styled-components';
 import { defaultSpinnerSize, Spinner } from '../Spinner/Spinner';
 import { spinnerDimensions } from '../Spinner/Spinner.styles';
-import { getTypographyIntent, typographyWeights, } from '../Typography/Typography.styles';
+import { getTypographyIntent, typographyWeights } from '../Typography/Typography.styles';
 import { borderRadius } from '../_styles/borderRadius';
 import { colors } from '../_styles/colors';
 import { mediaIE11Hack } from '../_styles/media';
 import { focusable } from '../_styles/mixins';
 import { spacing } from '../_styles/spacing';
 var heights = {
-    sm: 24,
-    md: 36,
-    lg: 48,
+  sm: 24,
+  md: 36,
+  lg: 48
 };
 var paddingX = {
-    sm: spacing.xs,
-    md: 6,
-    lg: spacing.md,
+  sm: spacing.xs,
+  md: 6,
+  // TODO one-off
+  lg: spacing.md
 };
 var typographySizes = {
-    sm: 'small',
-    md: 'body',
-    lg: 'h3',
+  sm: 'small',
+  md: 'body',
+  lg: 'h3'
 };
 var buttonTextColors = {
-    primary: {
-        main: colors.white,
-        disabled: colors.white,
-    },
-    secondary: {
-        main: colors.gray15,
-        disabled: colors.gray70,
-    },
-    tertiary: {
-        main: colors.gray15,
-        disabled: colors.gray70,
-    },
-    tertiaryContrast: {
-        main: colors.blue45,
-        disabled: colors.blue45,
-    },
+  primary: {
+    main: colors.white,
+    disabled: colors.white
+  },
+  secondary: {
+    main: colors.gray15,
+    disabled: colors.gray70
+  },
+  tertiary: {
+    main: colors.gray15,
+    disabled: colors.gray70
+  },
+  tertiaryContrast: {
+    main: colors.blue45,
+    disabled: colors.blue45
+  }
 };
 var buttonBGColors = {
-    primary: {
-        main: colors.orange50,
-        hover: colors.orange45,
-        disabled: colors.orange85,
-    },
-    secondary: {
-        main: colors.gray90,
-        hover: colors.gray85,
-        disabled: colors.gray94,
-    },
-    tertiary: {
-        main: 'transparent',
-        hover: colors.gray90,
-        disabled: 'transparent',
-    },
-    tertiaryContrast: {
-        main: 'transparent',
-        hover: 'white',
-        disabled: 'transparent',
-    },
+  primary: {
+    main: colors.orange50,
+    hover: colors.orange45,
+    disabled: colors.orange85
+  },
+  secondary: {
+    main: colors.gray90,
+    hover: colors.gray85,
+    disabled: colors.gray94
+  },
+  tertiary: {
+    main: 'transparent',
+    hover: colors.gray90,
+    disabled: 'transparent'
+  },
+  tertiaryContrast: {
+    main: 'transparent',
+    hover: 'white',
+    disabled: 'transparent'
+  }
 };
 export function getBGColor(variant) {
-    var colors = buttonBGColors[variant];
-    if (!colors) {
-        console.error("@procore/core-react: Using invalid Button variant ".concat(variant, ". Please update, falling back to primary."));
-        return buttonBGColors.primary;
-    }
-    return colors;
+  var colors = buttonBGColors[variant];
+  if (!colors) {
+    console.error("@procore/core-react: Using invalid Button variant ".concat(variant, ". Please update, falling back to primary."));
+    return buttonBGColors.primary;
+  }
+  return colors;
 }
 export function getTextColor(variant) {
-    var colors = buttonTextColors[variant];
-    if (!colors) {
-        console.error("@procore/core-react: Using invalid Button variant ".concat(variant, ". Please update, falling back to primary."));
-        return buttonTextColors.primary;
-    }
-    return colors;
+  var colors = buttonTextColors[variant];
+  if (!colors) {
+    console.error("@procore/core-react: Using invalid Button variant ".concat(variant, ". Please update, falling back to primary."));
+    return buttonTextColors.primary;
+  }
+  return colors;
 }
 function getColors(loading, variant) {
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n\n    color: ", ";\n\n    &.active,\n    &:active,\n    &.focus,\n    &:focus,\n    &.hover,\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      background: ", ";\n      color: ", ";\n    }\n  "], ["\n    background: ", ";\n\n    color: ", ";\n\n    &.active,\n    &:active,\n    &.focus,\n    &:focus,\n    &.hover,\n    &:hover {\n      background: ", ";\n      color: ", ";\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      background: ", ";\n      color: ", ";\n    }\n  "])), loading
-        ? getBGColor(variant).hover
-        : getBGColor(variant).main, getTextColor(variant).main, getBGColor(variant).hover, getTextColor(variant).main, loading
-        ? getBGColor(variant).hover
-        : getBGColor(variant).disabled, getTextColor(variant).disabled);
+  return css(["background:", ";color:", ";&.active,&:active,&.focus,&:focus,&.hover,&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{background:", ";color:", ";}"], loading ? getBGColor(variant).hover : getBGColor(variant).main, getTextColor(variant).main, getBGColor(variant).hover, getTextColor(variant).main, loading ? getBGColor(variant).hover : getBGColor(variant).disabled, getTextColor(variant).disabled);
 }
-export var StyledContent = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n"], ["\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n"])));
-export var StyledSpinner = styled(Spinner)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: none;\n  position: absolute;\n  transform: translateZ(0);\n\n  @media ", " {\n    left: 50%;\n    top: 50%;\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  display: none;\n  position: absolute;\n  transform: translateZ(0);\n\n  @media ", " {\n    left: 50%;\n    top: 50%;\n    ", "\n  }\n"])), mediaIE11Hack, function (_a) {
-    var size = _a.size;
-    var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        margin-left: ", "px;\n        margin-top: ", "px;\n      "], ["\n        margin-left: ", "px;\n        margin-top: ", "px;\n      "])), margin, margin);
+export var StyledContent = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StyledContent",
+  componentId: "core-11_23_0__sc-c5bhwh-0"
+})(["align-items:center;display:flex;overflow:hidden;"]);
+export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
+  displayName: "StyledSpinner",
+  componentId: "core-11_23_0__sc-c5bhwh-1"
+})(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
+  var size = _ref.size;
+  var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
+  return css(["margin-left:", "px;margin-top:", "px;"], margin, margin);
 });
-export var StyledLabel = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: hidden;\n  padding: 0 6px; // TODO one-off\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & + span {\n    padding-left: 0;\n  }\n"], ["\n  overflow: hidden;\n  padding: 0 6px; // TODO one-off\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & + span {\n    padding-left: 0;\n  }\n"])));
+export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StyledLabel",
+  componentId: "core-11_23_0__sc-c5bhwh-2"
+})(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
 function getButtonStyles(block, disabled, loading, size, variant) {
-    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", "\n\n    ", "\n\n    ", "\n\n    align-items: center;\n    border-radius: ", "px;\n    border: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-flex;\n    flex-direction: row;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-weight: ", ";\n    height: ", "px;\n    justify-content: center;\n    margin: 0;\n    overflow: hidden;\n    padding: 0 ", "px;\n    position: relative;\n    pointer-events: ", ";\n    text-overflow: ellipsis;\n    user-select: ", ";\n    vertical-align: middle;\n    white-space: nowrap;\n    width: ", ";\n\n    [data-icon-prop='true'] {\n      pointer-events: none;\n      height: ", "px;\n      width: ", "px;\n    }\n\n    ", "\n  "], ["\n    ", "\n\n    ", "\n\n    ", "\n\n    align-items: center;\n    border-radius: ", "px;\n    border: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-flex;\n    flex-direction: row;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-weight: ", ";\n    height: ", "px;\n    justify-content: center;\n    margin: 0;\n    overflow: hidden;\n    padding: 0 ", "px;\n    position: relative;\n    pointer-events: ", ";\n    text-overflow: ellipsis;\n    user-select: ", ";\n    vertical-align: middle;\n    white-space: nowrap;\n    width: ", ";\n\n    [data-icon-prop='true'] {\n      pointer-events: none;\n      height: ", "px;\n      width: ", "px;\n    }\n\n    ", "\n  "])), getTypographyIntent(typographySizes[size]), focusable, getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      ", " {\n        pointer-events: none;\n        visibility: hidden;\n      }\n\n      ", " {\n        display: block;\n      }\n    "], ["\n      ", " {\n        pointer-events: none;\n        visibility: hidden;\n      }\n\n      ", " {\n        display: block;\n      }\n    "])), StyledContent, StyledSpinner));
+  return css(["", " ", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), focusable, getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
 }
-export var StyledButton = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var $block = _a.$block, disabled = _a.disabled, $loading = _a.$loading, $size = _a.$size, $variant = _a.$variant;
-    return getButtonStyles($block, disabled, $loading, $size, $variant);
+export var StyledButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "StyledButton",
+  componentId: "core-11_23_0__sc-c5bhwh-3"
+})(["", ""], function (_ref2) {
+  var $block = _ref2.$block,
+    disabled = _ref2.disabled,
+    $loading = _ref2.$loading,
+    $size = _ref2.$size,
+    $variant = _ref2.$variant;
+  return getButtonStyles($block, disabled, $loading, $size, $variant);
 });
-export var StyledLinkButton = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  text-decoration: none;\n\n  ", "\n"], ["\n  text-decoration: none;\n\n  ", "\n"])), function (_a) {
-    var $block = _a.$block, $disabled = _a.$disabled, $size = _a.$size, $variant = _a.$variant;
-    return getButtonStyles($block, $disabled, false, $size, $variant);
+export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
+  displayName: "StyledLinkButton",
+  componentId: "core-11_23_0__sc-c5bhwh-4"
+})(["text-decoration:none;", ""], function (_ref3) {
+  var $block = _ref3.$block,
+    $disabled = _ref3.$disabled,
+    $size = _ref3.$size,
+    $variant = _ref3.$variant;
+  return getButtonStyles($block, $disabled, false, $size, $variant);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 //# sourceMappingURL=Button.styles.js.map

package/dist/Button/Button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sourceRoot":"","sources":["../../src/Button/Button.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","names":["styled","css","defaultSpinnerSize","Spinner","spinnerDimensions","getTypographyIntent","typographyWeights","borderRadius","colors","mediaIE11Hack","focusable","spacing","heights","sm","md","lg","paddingX","xs","typographySizes","buttonTextColors","primary","main","white","disabled","secondary","gray15","gray70","tertiary","tertiaryContrast","blue45","buttonBGColors","orange50","hover","orange45","orange85","gray90","gray85","gray94","getBGColor","variant","console","error","concat","getTextColor","getColors","loading","StyledContent","span","withConfig","displayName","componentId","StyledSpinner","_ref","size","margin","StyledLabel","getButtonStyles","block","semibold","StyledButton","button","_ref2","$block","$loading","$size","$variant","StyledLinkButton","a","_ref3","$disabled"],"sources":["../../src/Button/Button.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { defaultSpinnerSize, Spinner } from '../Spinner/Spinner'\nimport { spinnerDimensions } from '../Spinner/Spinner.styles'\nimport {\n  getTypographyIntent,\n  typographyWeights,\n} from '../Typography/Typography.styles'\nimport { Intent } from '../Typography/Typography.types'\nimport { borderRadius } from '../_styles/borderRadius'\nimport { colors } from '../_styles/colors'\nimport { mediaIE11Hack } from '../_styles/media'\nimport { focusable } from '../_styles/mixins'\nimport { spacing } from '../_styles/spacing'\nimport { ButtonSizes, ButtonVariant, SizingObject } from './Button.types'\n\nconst heights: SizingObject = {\n  sm: 24,\n  md: 36,\n  lg: 48,\n}\n\nconst paddingX: SizingObject = {\n  sm: spacing.xs,\n  md: 6, // TODO one-off\n  lg: spacing.md,\n}\n\nconst typographySizes: { [key in ButtonSizes]: Intent } = {\n  sm: 'small',\n  md: 'body',\n  lg: 'h3',\n}\n\nconst buttonTextColors: {\n  [key in ButtonVariant]: { main: string; disabled: string }\n} = {\n  primary: {\n    main: colors.white,\n    disabled: colors.white,\n  },\n  secondary: {\n    main: colors.gray15,\n    disabled: colors.gray70,\n  },\n  tertiary: {\n    main: colors.gray15,\n    disabled: colors.gray70,\n  },\n  tertiaryContrast: {\n    main: colors.blue45,\n    disabled: colors.blue45,\n  },\n}\n\nconst buttonBGColors: {\n  [key in ButtonVariant]: {\n    main: string\n    hover: string\n    disabled: string\n  }\n} = {\n  primary: {\n    main: colors.orange50,\n    hover: colors.orange45,\n    disabled: colors.orange85,\n  },\n  secondary: {\n    main: colors.gray90,\n    hover: colors.gray85,\n    disabled: colors.gray94,\n  },\n  tertiary: {\n    main: 'transparent',\n    hover: colors.gray90,\n    disabled: 'transparent',\n  },\n  tertiaryContrast: {\n    main: 'transparent',\n    hover: 'white',\n    disabled: 'transparent',\n  },\n}\n\nexport function getBGColor(variant: ButtonVariant) {\n  const colors = buttonBGColors[variant]\n  if (!colors) {\n    console.error(\n      `@procore/core-react: Using invalid Button variant ${variant}. Please update, falling back to primary.`\n    )\n    return buttonBGColors.primary\n  }\n  return colors\n}\n\nexport function getTextColor(variant: ButtonVariant) {\n  const colors = buttonTextColors[variant]\n  if (!colors) {\n    console.error(\n      `@procore/core-react: Using invalid Button variant ${variant}. Please update, falling back to primary.`\n    )\n    return buttonTextColors.primary\n  }\n  return colors\n}\n\nfunction getColors(loading: boolean, variant: ButtonVariant) {\n  return css`\n    background: ${loading\n      ? getBGColor(variant).hover\n      : getBGColor(variant).main};\n\n    color: ${getTextColor(variant).main};\n\n    &.active,\n    &:active,\n    &.focus,\n    &:focus,\n    &.hover,\n    &:hover {\n      background: ${getBGColor(variant).hover};\n      color: ${getTextColor(variant).main};\n    }\n\n    &:disabled,\n    &[aria-disabled='true'] {\n      background: ${loading\n        ? getBGColor(variant).hover\n        : getBGColor(variant).disabled};\n      color: ${getTextColor(variant).disabled};\n    }\n  `\n}\n\nexport const StyledContent = styled.span`\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n`\n\nexport const StyledSpinner = styled(Spinner)`\n  box-sizing: border-box;\n  display: none;\n  position: absolute;\n  transform: translateZ(0);\n\n  @media ${mediaIE11Hack} {\n    left: 50%;\n    top: 50%;\n    ${({ size }) => {\n      const margin = -1 * (spinnerDimensions[size ?? defaultSpinnerSize] / 2)\n      return css`\n        margin-left: ${margin}px;\n        margin-top: ${margin}px;\n      `\n    }}\n  }\n`\n\nexport const StyledLabel = styled.span`\n  overflow: hidden;\n  padding: 0 6px; // TODO one-off\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & + span {\n    padding-left: 0;\n  }\n`\n\ninterface StyledButtonProps {\n  disabled: boolean\n  $block: boolean\n  $loading: boolean\n  $size: ButtonSizes\n  $variant: ButtonVariant\n}\n\nfunction getButtonStyles(\n  block: boolean,\n  disabled: boolean,\n  loading: boolean,\n  size: ButtonSizes,\n  variant: ButtonVariant\n) {\n  return css`\n    ${getTypographyIntent(typographySizes[size])}\n\n    ${focusable}\n\n    ${getColors(loading, variant)}\n\n    align-items: center;\n    border-radius: ${borderRadius.md}px;\n    border: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: inline-flex;\n    flex-direction: row;\n    flex-shrink: 0;\n    font-family: inherit;\n    font-weight: ${typographyWeights.semibold};\n    height: ${heights[size]}px;\n    justify-content: center;\n    margin: 0;\n    overflow: hidden;\n    padding: 0 ${paddingX[size]}px;\n    position: relative;\n    pointer-events: ${disabled || loading ? 'none' : 'inherit'};\n    text-overflow: ellipsis;\n    user-select: ${disabled || loading ? 'none' : 'inherit'};\n    vertical-align: middle;\n    white-space: nowrap;\n    width: ${block && '100%'};\n\n    [data-icon-prop='true'] {\n      pointer-events: none;\n      height: ${size === 'sm' ? 16 : 24}px;\n      width: ${size === 'sm' ? 16 : 24}px;\n    }\n\n    ${loading &&\n    css`\n      ${StyledContent} {\n        pointer-events: none;\n        visibility: hidden;\n      }\n\n      ${StyledSpinner} {\n        display: block;\n      }\n    `}\n  `\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n  ${({ $block, disabled, $loading, $size, $variant }) =>\n    getButtonStyles($block, disabled, $loading, $size, $variant)}\n`\n\ninterface StyledLinkButtonProps\n  extends Pick<StyledButtonProps, '$block' | '$size' | '$variant'> {\n  $disabled: boolean\n}\n\nexport const StyledLinkButton = styled.a<StyledLinkButtonProps>`\n  text-decoration: none;\n\n  ${({ $block, $disabled, $size, $variant }) =>\n    getButtonStyles($block, $disabled, false, $size, $variant)}\n`\n"],"mappings":"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"}

package/dist/Button/Button.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Button.types.js","names":[],"sources":["../../src/Button/Button.types.ts"],"sourcesContent":["import { AnchorAttributes, ButtonAttributes } from '../_utils/types'\n\nexport type ButtonSizes = 'sm' | 'md' | 'lg'\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'tertiaryContrast'\n\nexport type SizingObject = { [key in ButtonSizes]: number }\n\nexport interface ButtonProps extends ButtonAttributes {\n  /**\n   * Sets the button to be 100% of the width of its parent\n   * @since 10.19.0\n   */\n  block?: boolean\n  /**\n   * string icons have been deprecated, please pass a component from `@procore/core-icons`\n   * The icon to display on the left side of the label\n   * @since 10.19.0\n   */\n  icon?: React.ReactNode\n  /**\n   * The icon to display on the right side of the label\n   * @since 10.19.0\n   */\n  iconRight?: React.ReactNode\n  /**\n   * Shows the button spinner\n   * @since 10.19.0\n   */\n  loading?: boolean\n  /**\n   * The size of the button\n   * @since 10.19.0\n   */\n  size?: ButtonSizes\n  /**\n   * The variant of the button\n   * @since 10.27.2\n   */\n  variant?: ButtonVariant\n}\n\nexport interface LinkButtonProps\n  extends AnchorAttributes,\n    Pick<\n      ButtonProps,\n      'block' | 'disabled' | 'icon' | 'iconRight' | 'size' | 'variant'\n    > {}\n"],"mappings":""}

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","names":["Button","LinkButton","StyledButton"],"sources":["../../src/Button/index.ts"],"sourcesContent":["export { Button, LinkButton } from './Button'\nexport type { ButtonProps, LinkButtonProps } from './Button.types'\n\nexport { StyledButton } from './Button.styles'\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,UAAU,QAAQ,UAAU;AAG7C,SAASC,YAAY,QAAQ,iBAAiB"}