@os-design/core 1.0.229 → 1.0.230

package/dist/esm/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for LinkButton\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","m","resetButtonStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","ButtonContent","useButtonColors","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport ButtonContent from './ButtonContent';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\n\ntype JsxButtonProps = Omit<\n  JSX.IntrinsicElements['button'],\n  'type' | 'color' | 'ref'\n>;\n\n// Used by Button, ButtonLink\nexport interface BaseButtonProps extends WithSize {\n  /**\n   * Type of button styles.\n   * @default primary\n   */\n  type?: 'primary' | 'outline' | 'ghost';\n  /**\n   * Sets the danger styles.\n   * @default false\n   */\n  danger?: boolean;\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Whether the button has full width.\n   * Possible values:\n   * `default` – the button has full width if the screen width is less than xs;\n   * `always` – the button always has full width;\n   * `never` – the button never has full width.\n   * @default default\n   */\n  wide?: 'default' | 'always' | 'never';\n  /**\n   * Shows the loading status and disables the button.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n  btnType: ButtonProps['type'];\n  colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ${clr(p.colors.bgHover)};\n      }\n    }\n  `;\n\nconst primaryStyles = (p) =>\n  p.btnType === 'primary' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: ${clr(p.colors.bg)};\n    ${hoverStyles(p)};\n  `;\n\nconst ghostStyles = (p) =>\n  p.btnType === 'ghost' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    ${hoverStyles(p)};\n  `;\n\nconst outlineStyles = (p) =>\n  p.btnType === 'outline' &&\n  css`\n    color: ${clr(p.colors.text)};\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ${hoverStyles(p)};\n  `;\n\nconst wideDefaultStyles = (p) =>\n  p.wide === 'default' &&\n  css`\n    ${m.max.xxs} {\n      width: 100%;\n    }\n  `;\n\nconst wideAlwaysStyles = (p) =>\n  p.wide === 'always' &&\n  css`\n    width: 100%;\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n  `;\n\nexport const StyledButton = styled(\n  'button',\n  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n  ${resetButtonStyles};\n  position: relative; // Because LoadingContainer has an absolute position\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box; // Important for ButtonLink\n\n  // Disable multiline\n  white-space: nowrap;\n  overflow: hidden;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  height: ${(p) => p.theme.buttonHeight}em;\n  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n  // Do not set inline-flex, otherwise the mobile safari cuts off\n  // the bottom border of the button (tested in iPhone 6)\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  font-weight: 500;\n  line-height: 1;\n\n  ${primaryStyles};\n  ${outlineStyles};\n  ${ghostStyles};\n\n  ${wideDefaultStyles};\n  ${wideAlwaysStyles};\n\n  ${disabledStyles};\n\n  ${sizeStyles};\n  ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      children,\n      onMouseDown = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButton>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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"}

package/dist/esm/Button/utils/useButtonColors.js

@@ -1,6 +1,6 @@
 import { useTheme } from '@os-design/theming';
 import { useMemo } from 'react';
-// Used by Button, LinkButton
+// Used by Button, ButtonLink
 const useButtonColors = ({
   type,
   danger,

package/dist/esm/Button/utils/useButtonColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n  type: 'primary' | 'outline' | 'ghost';\n  danger: boolean;\n  disabled: boolean;\n}\n\nexport interface ButtonColors {\n  text: Color;\n  bg?: Color;\n  bgHover?: Color;\n}\n\nexport interface LoadingColors {\n  text: Color;\n  bg: Color;\n}\n\ninterface UseButtonColorsRes {\n  buttonColors: ButtonColors;\n  loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n  type,\n  danger,\n  disabled,\n}: Props): UseButtonColorsRes => {\n  const { theme } = useTheme();\n\n  const prefix = useMemo<string>(() => {\n    if (danger) return 'Danger';\n    return '';\n  }, [danger]);\n\n  const buttonColors = useMemo<ButtonColors>(() => {\n    if (type === 'primary') {\n      return !disabled\n        ? {\n            text: theme[`button${prefix}PrimaryColorText`],\n            bg: theme[`button${prefix}PrimaryColorBg`],\n            bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n          }\n        : {\n            text: theme.buttonDisabledPrimaryColorText,\n            bg: theme.buttonDisabledPrimaryColorBg,\n          };\n    }\n    return !disabled\n      ? {\n          text: theme[`button${prefix}GhostColorText`],\n          bgHover: theme[`button${prefix}GhostColorBgHover`],\n        }\n      : {\n          text: theme.buttonDisabledGhostColorText,\n        };\n  }, [type, disabled, theme, prefix]);\n\n  const loadingColors = useMemo<LoadingColors>(() => {\n    if (disabled) {\n      return {\n        text: theme.buttonDisabledPrimaryColorText,\n        bg: theme.buttonDisabledPrimaryColorBg,\n      };\n    }\n    if (type === 'primary') {\n      return {\n        text: theme[`button${prefix}PrimaryColorLoadingText`],\n        bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n      };\n    }\n    return {\n      text: theme[`button${prefix}GhostColorLoadingText`],\n      bg: theme[`button${prefix}GhostColorLoadingBg`],\n    };\n  }, [disabled, type, theme, prefix]);\n\n  return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGd,OAAO,CAAgB,MAAM;IACjD,IAAII,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe"}
+{"version":3,"file":"useButtonColors.js","names":["useTheme","useMemo","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { Color, useTheme } from '@os-design/theming';\nimport { useMemo } from 'react';\n\ninterface Props {\n  type: 'primary' | 'outline' | 'ghost';\n  danger: boolean;\n  disabled: boolean;\n}\n\nexport interface ButtonColors {\n  text: Color;\n  bg?: Color;\n  bgHover?: Color;\n}\n\nexport interface LoadingColors {\n  text: Color;\n  bg: Color;\n}\n\ninterface UseButtonColorsRes {\n  buttonColors: ButtonColors;\n  loadingColors: LoadingColors;\n}\n\n// Used by Button, ButtonLink\nconst useButtonColors = ({\n  type,\n  danger,\n  disabled,\n}: Props): UseButtonColorsRes => {\n  const { theme } = useTheme();\n\n  const prefix = useMemo<string>(() => {\n    if (danger) return 'Danger';\n    return '';\n  }, [danger]);\n\n  const buttonColors = useMemo<ButtonColors>(() => {\n    if (type === 'primary') {\n      return !disabled\n        ? {\n            text: theme[`button${prefix}PrimaryColorText`],\n            bg: theme[`button${prefix}PrimaryColorBg`],\n            bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n          }\n        : {\n            text: theme.buttonDisabledPrimaryColorText,\n            bg: theme.buttonDisabledPrimaryColorBg,\n          };\n    }\n    return !disabled\n      ? {\n          text: theme[`button${prefix}GhostColorText`],\n          bgHover: theme[`button${prefix}GhostColorBgHover`],\n        }\n      : {\n          text: theme.buttonDisabledGhostColorText,\n        };\n  }, [type, disabled, theme, prefix]);\n\n  const loadingColors = useMemo<LoadingColors>(() => {\n    if (disabled) {\n      return {\n        text: theme.buttonDisabledPrimaryColorText,\n        bg: theme.buttonDisabledPrimaryColorBg,\n      };\n    }\n    if (type === 'primary') {\n      return {\n        text: theme[`button${prefix}PrimaryColorLoadingText`],\n        bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n      };\n    }\n    return {\n      text: theme[`button${prefix}GhostColorLoadingText`],\n      bg: theme[`button${prefix}GhostColorLoadingBg`],\n    };\n  }, [disabled, type, theme, prefix]);\n\n  return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAAgBA,QAAQ,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,OAAO;AAwB/B;AACA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,MAAM;EACNC;AACK,CAAC,KAAyB;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAE5B,MAAMO,MAAM,GAAGN,OAAO,CAAS,MAAM;IACnC,IAAIG,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMI,YAAY,GAAGP,OAAO,CAAe,MAAM;IAC/C,IAAIE,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAiB,CAAC;QAC9CG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;QAC1CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAoB;MACrD,CAAC,GACD;QACEE,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACP;IACA,OAAO,CAACR,QAAQ,GACZ;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAe,CAAC;MAC5CI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAkB;IACnD,CAAC,GACD;MACEE,IAAI,EAAEH,KAAK,CAACQ;IACd,CAAC;EACP,CAAC,EAAE,CAACX,IAAI,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,MAAMQ,aAAa,GAAGd,OAAO,CAAgB,MAAM;IACjD,IAAII,QAAQ,EAAE;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BAA8B;QAC1CF,EAAE,EAAEJ,KAAK,CAACO;MACZ,CAAC;IACH;IACA,IAAIV,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAwB,CAAC;QACrDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAsB;MAClD,CAAC;IACH;IACA,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAsB,CAAC;MACnDG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAoB;IAChD,CAAC;EACH,CAAC,EAAE,CAACF,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEC,YAAY;IAAEO;EAAc,CAAC;AACxC,CAAC;AAED,eAAeb,eAAe"}

package/dist/esm/ButtonLink/index.js

@@ -0,0 +1,73 @@
+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); }
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import { StyledButton } from '../Button';
+import ButtonContent from '../Button/ButtonContent';
+import useButtonColors from '../Button/utils/useButtonColors';
+const disabledStyles = p => p.disabled && css`
+    pointer-events: none;
+  `;
+const StyledButtonLink = styled(StyledButton.withComponent('a'), omitEmotionProps('as', 'disabled'))`
+  text-decoration: none;
+  display: inline-flex;
+  ${disabledStyles};
+`;
+
+/**
+ * The button that is rendered as a link.
+ */
+const ButtonLink = /*#__PURE__*/forwardRef(({
+  type = 'primary',
+  danger = false,
+  left,
+  right,
+  wide = 'default',
+  loading = false,
+  disabled = false,
+  size,
+  as,
+  onMouseDown = () => {},
+  onKeyDown = () => {},
+  children,
+  ...rest
+}, ref) => {
+  const {
+    buttonColors,
+    loadingColors
+  } = useButtonColors({
+    type,
+    danger,
+    disabled
+  });
+  return /*#__PURE__*/React.createElement(StyledButtonLink, _extends({
+    btnType: type,
+    colors: buttonColors,
+    wide: wide,
+    loading: loading,
+    disabled: disabled || loading,
+    size: size,
+    as: as,
+    onMouseDown: e => {
+      onMouseDown(e);
+      e.preventDefault();
+    },
+    onKeyDown: e => {
+      onKeyDown(e);
+      if (disabled || loading) e.preventDefault();
+    },
+    "aria-disabled": disabled || loading,
+    "aria-busy": loading
+  }, rest, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(ButtonContent, {
+    left: left,
+    right: right,
+    loading: loading,
+    loadingColors: loadingColors
+  }, children));
+});
+ButtonLink.displayName = 'ButtonLink';
+export default ButtonLink;
+//# sourceMappingURL=index.js.map

package/dist/esm/ButtonLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","disabledStyles","p","disabled","StyledButtonLink","withComponent","ButtonLink","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/ButtonLink/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type ButtonLinkProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ButtonProps;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    pointer-events: none;\n  `;\n\nconst StyledButtonLink = styled(\n  StyledButton.withComponent('a'),\n  omitEmotionProps('as', 'disabled')\n)`\n  text-decoration: none;\n  display: inline-flex;\n  ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as a link.\n */\nconst ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      as,\n      onMouseDown = () => {},\n      onKeyDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledButtonLink\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown(e);\n          if (disabled || loading) e.preventDefault();\n        }}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledButtonLink>\n    );\n  }\n);\n\nButtonLink.displayName = 'ButtonLink';\n\nexport default ButtonLink;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAS7D,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN;AACA,GAAG;AAEH,MAAMW,gBAAgB,GAAGV,MAAM,CAC7BI,YAAY,CAACO,aAAa,CAAC,GAAG,CAAC,EAC/BV,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIM,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGT,UAAU,CAC3B,CACE;EACEU,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACtDO,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,oBACEP,KAAA,CAAA0B,aAAA,CAAClB,gBAAgB,EAAAmB,QAAA;IACfC,OAAO,EAAEjB,IAAK;IACdkB,MAAM,EAAEL,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGW,CAAC,IAAK;MAClBX,WAAW,CAACW,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFX,SAAS,EAAGU,CAAC,IAAK;MAChBV,SAAS,CAACU,CAAC,CAAC;MACZ,IAAIvB,QAAQ,IAAIS,OAAO,EAAEc,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAexB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETvB,KAAA,CAAA0B,aAAA,CAACvB,aAAa;IACZU,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CAAC;AAEvB,CACF,CAAC;AAEDX,UAAU,CAACsB,WAAW,GAAG,YAAY;AAErC,eAAetB,UAAU"}

package/dist/esm/Link/index.js

@@ -5,9 +5,6 @@ import { resetFocusStyles, sizeStyles, transitionStyles } from '@os-design/style
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
-/**
- * Sets base underline styles.
- */
 const underlineBaseStyles = p => css`
   position: relative;
   display: inline-block;
@@ -22,11 +19,7 @@ const underlineBaseStyles = p => css`
     background-color: ${clr(p.theme.linkColor)};
   }
 `;
-
-/**
- * Sets underline styles on hover.
- */
-const underlineHoverStyles = p => p.underline === 'hover' && css`
+export const underlineHoverStyles = p => p.underline === 'hover' && css`
     @media (hover: hover) {
       ${underlineBaseStyles(p)};
 
@@ -43,11 +36,7 @@ const underlineHoverStyles = p => p.underline === 'hover' && css`
       }
     }
   `;
-
-/**
- * Sets underline styles always.
- */
-const underlineAlwaysStyles = p => p.underline === 'always' && css`
+export const underlineAlwaysStyles = p => p.underline === 'always' && css`
     ${underlineBaseStyles(p)};
 
     &::after {

package/dist/esm/Link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","underlineBaseStyles","p","theme","linkColor","underlineHoverStyles","underline","underlineAlwaysStyles","StyledLink","Link","as","onMouseDown","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n  to?: string;\n  replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n  /**\n   * Type of the underline styles.\n   * @default hover\n   */\n  underline?: 'hover' | 'always' | 'never';\n  /**\n   * The custom link component.\n   * For example, the Link from react-router-dom.\n   * @default undefined\n   */\n  as?: React.ElementType;\n}\n\n/**\n * Sets base underline styles.\n */\nconst underlineBaseStyles = (p) => css`\n  position: relative;\n  display: inline-block;\n  padding-bottom: 0.1em;\n\n  &::after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 0.125em;\n    background-color: ${clr(p.theme.linkColor)};\n  }\n`;\n\n/**\n * Sets underline styles on hover.\n */\nconst underlineHoverStyles = (p) =>\n  p.underline === 'hover' &&\n  css`\n    @media (hover: hover) {\n      ${underlineBaseStyles(p)};\n\n      &::after {\n        width: 0;\n        opacity: 0;\n        ${transitionStyles('width', 'opacity')(p)};\n      }\n\n      &:hover::after,\n      &:focus::after {\n        width: 100%;\n        opacity: 1;\n      }\n    }\n  `;\n\n/**\n * Sets underline styles always.\n */\nconst underlineAlwaysStyles = (p) =>\n  p.underline === 'always' &&\n  css`\n    ${underlineBaseStyles(p)};\n\n    &::after {\n      width: 100%;\n      opacity: 1;\n    }\n  `;\n\nconst StyledLink = styled(\n  'a',\n  omitEmotionProps('size', 'underline', 'as')\n)<LinkProps>`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1.2;\n\n  &,\n  &:active,\n  &:focus {\n    color: ${(p) => clr(p.theme.linkColor)};\n  }\n\n  ${underlineHoverStyles};\n  ${underlineAlwaysStyles};\n  ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ underline = 'hover', as, onMouseDown = () => {}, ...rest }, ref) => (\n    <StyledLink\n      underline={underline}\n      as={as}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAsBzC;AACA;AACA;AACA,MAAMC,mBAAmB,GAAIC,CAAC,IAAKV,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC/C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAMC,oBAAoB,GAAIH,CAAC,IAC7BA,CAAC,CAACI,SAAS,KAAK,OAAO,IACvBd,GAAI;AACN;AACA,QAAQS,mBAAmB,CAACC,CAAC,CAAE;AAC/B;AACA;AACA;AACA;AACA,UAAUN,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAACM,CAAC,CAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA,MAAMK,qBAAqB,GAAIL,CAAC,IAC9BA,CAAC,CAACI,SAAS,KAAK,QAAQ,IACxBd,GAAI;AACN,MAAMS,mBAAmB,CAACC,CAAC,CAAE;AAC7B;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMM,UAAU,GAAGf,MAAM,CACvB,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAC5C,CAAa;AACb,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcQ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC3C;AACA;AACA,IAAIC,oBAAqB;AACzB,IAAIE,qBAAsB;AAC1B,IAAIZ,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMc,IAAI,gBAAGT,UAAU,CACrB,CAAC;EAAEM,SAAS,GAAG,OAAO;EAAEI,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChEd,KAAA,CAAAe,aAAA,CAACN,UAAU,EAAAO,QAAA;EACTT,SAAS,EAAEA,SAAU;EACrBI,EAAE,EAAEA,EAAG;EACPC,WAAW,EAAGK,CAAC,IAAK;IAClBL,WAAW,CAACK,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,CAAC,CAAC;EACpB;AAAE,GACEL,IAAI;EACRC,GAAG,EAAEA;AAAI,EACV,CAEL,CAAC;AAEDJ,IAAI,CAACS,WAAW,GAAG,MAAM;AAEzB,eAAeT,IAAI"}
+{"version":3,"file":"index.js","names":["css","styled","resetFocusStyles","sizeStyles","transitionStyles","clr","omitEmotionProps","React","forwardRef","underlineBaseStyles","p","theme","linkColor","underlineHoverStyles","underline","underlineAlwaysStyles","StyledLink","Link","as","onMouseDown","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/Link/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\n\nexport interface ReactRouterLinkProps {\n  to?: string;\n  replace?: boolean;\n}\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;\nexport interface LinkProps extends JsxAProps, ReactRouterLinkProps, WithSize {\n  /**\n   * Type of the underline styles.\n   * @default hover\n   */\n  underline?: 'hover' | 'always' | 'never';\n  /**\n   * The custom link component.\n   * For example, the Link from react-router-dom.\n   * @default undefined\n   */\n  as?: React.ElementType;\n}\n\nconst underlineBaseStyles = (p) => css`\n  position: relative;\n  display: inline-block;\n  padding-bottom: 0.1em;\n\n  &::after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 0.125em;\n    background-color: ${clr(p.theme.linkColor)};\n  }\n`;\n\nexport const underlineHoverStyles = (p) =>\n  p.underline === 'hover' &&\n  css`\n    @media (hover: hover) {\n      ${underlineBaseStyles(p)};\n\n      &::after {\n        width: 0;\n        opacity: 0;\n        ${transitionStyles('width', 'opacity')(p)};\n      }\n\n      &:hover::after,\n      &:focus::after {\n        width: 100%;\n        opacity: 1;\n      }\n    }\n  `;\n\nexport const underlineAlwaysStyles = (p) =>\n  p.underline === 'always' &&\n  css`\n    ${underlineBaseStyles(p)};\n\n    &::after {\n      width: 100%;\n      opacity: 1;\n    }\n  `;\n\nconst StyledLink = styled(\n  'a',\n  omitEmotionProps('size', 'underline', 'as')\n)<LinkProps>`\n  ${resetFocusStyles};\n\n  cursor: pointer;\n  text-decoration: none;\n  line-height: 1.2;\n\n  &,\n  &:active,\n  &:focus {\n    color: ${(p) => clr(p.theme.linkColor)};\n  }\n\n  ${underlineHoverStyles};\n  ${underlineAlwaysStyles};\n  ${sizeStyles};\n`;\n\n/**\n * The link component to navigate between pages.\n */\nconst Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ underline = 'hover', as, onMouseDown = () => {}, ...rest }, ref) => (\n    <StyledLink\n      underline={underline}\n      as={as}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nLink.displayName = 'Link';\n\nexport default Link;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SACEC,gBAAgB,EAChBC,UAAU,EACVC,gBAAgB,QAEX,mBAAmB;AAC1B,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAsBzC,MAAMC,mBAAmB,GAAIC,CAAC,IAAKV,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC/C;AACA,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAIH,CAAC,IACpCA,CAAC,CAACI,SAAS,KAAK,OAAO,IACvBd,GAAI;AACN;AACA,QAAQS,mBAAmB,CAACC,CAAC,CAAE;AAC/B;AACA;AACA;AACA;AACA,UAAUN,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAACM,CAAC,CAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,OAAO,MAAMK,qBAAqB,GAAIL,CAAC,IACrCA,CAAC,CAACI,SAAS,KAAK,QAAQ,IACxBd,GAAI;AACN,MAAMS,mBAAmB,CAACC,CAAC,CAAE;AAC7B;AACA;AACA;AACA;AACA;AACA,GAAG;AAEH,MAAMM,UAAU,GAAGf,MAAM,CACvB,GAAG,EACHK,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,CAC5C,CAAa;AACb,IAAIJ,gBAAiB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAcQ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AAC3C;AACA;AACA,IAAIC,oBAAqB;AACzB,IAAIE,qBAAsB;AAC1B,IAAIZ,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMc,IAAI,gBAAGT,UAAU,CACrB,CAAC;EAAEM,SAAS,GAAG,OAAO;EAAEI,EAAE;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChEd,KAAA,CAAAe,aAAA,CAACN,UAAU,EAAAO,QAAA;EACTT,SAAS,EAAEA,SAAU;EACrBI,EAAE,EAAEA,EAAG;EACPC,WAAW,EAAGK,CAAC,IAAK;IAClBL,WAAW,CAACK,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,CAAC,CAAC;EACpB;AAAE,GACEL,IAAI;EACRC,GAAG,EAAEA;AAAI,EACV,CAEL,CAAC;AAEDJ,IAAI,CAACS,WAAW,GAAG,MAAM;AAEzB,eAAeT,IAAI"}

package/dist/esm/LinkButton/index.js

@@ -1,73 +1,39 @@
 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); }
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { resetButtonStyles, sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
-import { StyledButton } from '../Button';
-import ButtonContent from '../Button/ButtonContent';
-import useButtonColors from '../Button/utils/useButtonColors';
-const disabledStyles = p => p.disabled && css`
-    pointer-events: none;
-  `;
-const StyledLinkButton = styled(StyledButton.withComponent('a'), omitEmotionProps('as', 'disabled'))`
-  text-decoration: none;
-  display: inline-flex;
-  ${disabledStyles};
+import { underlineAlwaysStyles, underlineHoverStyles } from '../Link';
+const StyledButton = styled('button', omitEmotionProps('size', 'underline'))`
+  ${resetButtonStyles};
+
+  cursor: pointer;
+  text-align: left;
+  line-height: 1.2;
+  color: ${p => clr(p.theme.linkColor)};
+
+  ${underlineHoverStyles};
+  ${underlineAlwaysStyles};
+  ${sizeStyles};
 `;
 
 /**
- * The button that is rendered as the a tag.
+ * The link component that is rendered as a button.
  */
 const LinkButton = /*#__PURE__*/forwardRef(({
-  type = 'primary',
-  danger = false,
-  left,
-  right,
-  wide = 'default',
-  loading = false,
-  disabled = false,
-  size,
-  as,
+  underline = 'hover',
   onMouseDown = () => {},
-  onKeyDown = () => {},
-  children,
   ...rest
-}, ref) => {
-  const {
-    buttonColors,
-    loadingColors
-  } = useButtonColors({
-    type,
-    danger,
-    disabled
-  });
-  return /*#__PURE__*/React.createElement(StyledLinkButton, _extends({
-    btnType: type,
-    colors: buttonColors,
-    wide: wide,
-    loading: loading,
-    disabled: disabled || loading,
-    size: size,
-    as: as,
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
-    onKeyDown: e => {
-      onKeyDown(e);
-      if (disabled || loading) e.preventDefault();
-    },
-    "aria-disabled": disabled || loading,
-    "aria-busy": loading
-  }, rest, {
-    ref: ref
-  }), /*#__PURE__*/React.createElement(ButtonContent, {
-    left: left,
-    right: right,
-    loading: loading,
-    loadingColors: loadingColors
-  }, children));
-});
+}, ref) => /*#__PURE__*/React.createElement(StyledButton, _extends({
+  underline: underline,
+  onMouseDown: e => {
+    onMouseDown(e);
+    e.preventDefault();
+  }
+}, rest, {
+  ref: ref
+})));
 LinkButton.displayName = 'LinkButton';
 export default LinkButton;
 //# sourceMappingURL=index.js.map

package/dist/esm/LinkButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","omitEmotionProps","React","forwardRef","StyledButton","ButtonContent","useButtonColors","disabledStyles","p","disabled","StyledLinkButton","withComponent","LinkButton","type","danger","left","right","wide","loading","size","as","onMouseDown","onKeyDown","children","rest","ref","buttonColors","loadingColors","createElement","_extends","btnType","colors","e","preventDefault","displayName"],"sources":["../../../src/LinkButton/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { ButtonProps, StyledButton } from '../Button';\nimport ButtonContent from '../Button/ButtonContent';\nimport useButtonColors from '../Button/utils/useButtonColors';\nimport { LinkProps, ReactRouterLinkProps } from '../Link';\n\ntype JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;\nexport type LinkButtonProps = JsxAProps &\n  ReactRouterLinkProps &\n  Pick<LinkProps, 'as'> &\n  ButtonProps;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    pointer-events: none;\n  `;\n\nconst StyledLinkButton = styled(\n  StyledButton.withComponent('a'),\n  omitEmotionProps('as', 'disabled')\n)`\n  text-decoration: none;\n  display: inline-flex;\n  ${disabledStyles};\n`;\n\n/**\n * The button that is rendered as the a tag.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      type = 'primary',\n      danger = false,\n      left,\n      right,\n      wide = 'default',\n      loading = false,\n      disabled = false,\n      size,\n      as,\n      onMouseDown = () => {},\n      onKeyDown = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { buttonColors, loadingColors } = useButtonColors({\n      type,\n      danger,\n      disabled,\n    });\n\n    return (\n      <StyledLinkButton\n        btnType={type}\n        colors={buttonColors}\n        wide={wide}\n        loading={loading}\n        disabled={disabled || loading}\n        size={size}\n        as={as}\n        onMouseDown={(e) => {\n          onMouseDown(e);\n          e.preventDefault();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown(e);\n          if (disabled || loading) e.preventDefault();\n        }}\n        aria-disabled={disabled || loading}\n        aria-busy={loading}\n        {...rest}\n        ref={ref}\n      >\n        <ButtonContent\n          left={left}\n          right={right}\n          loading={loading}\n          loadingColors={loadingColors}\n        >\n          {children}\n        </ButtonContent>\n      </StyledLinkButton>\n    );\n  }\n);\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"mappings":";AAAA,SAASA,GAAG,QAAQ,gBAAgB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAAsBC,YAAY,QAAQ,WAAW;AACrD,OAAOC,aAAa,MAAM,yBAAyB;AACnD,OAAOC,eAAe,MAAM,iCAAiC;AAS7D,MAAMC,cAAc,GAAIC,CAAC,IACvBA,CAAC,CAACC,QAAQ,IACVV,GAAI;AACN;AACA,GAAG;AAEH,MAAMW,gBAAgB,GAAGV,MAAM,CAC7BI,YAAY,CAACO,aAAa,CAAC,GAAG,CAAC,EAC/BV,gBAAgB,CAAC,IAAI,EAAE,UAAU,CACnC,CAAE;AACF;AACA;AACA,IAAIM,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMK,UAAU,gBAAGT,UAAU,CAC3B,CACE;EACEU,IAAI,GAAG,SAAS;EAChBC,MAAM,GAAG,KAAK;EACdC,IAAI;EACJC,KAAK;EACLC,IAAI,GAAG,SAAS;EAChBC,OAAO,GAAG,KAAK;EACfT,QAAQ,GAAG,KAAK;EAChBU,IAAI;EACJC,EAAE;EACFC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EACtBC,SAAS,GAAGA,CAAA,KAAM,CAAC,CAAC;EACpBC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACtDO,IAAI;IACJC,MAAM;IACNL;EACF,CAAC,CAAC;EAEF,oBACEP,KAAA,CAAA0B,aAAA,CAAClB,gBAAgB,EAAAmB,QAAA;IACfC,OAAO,EAAEjB,IAAK;IACdkB,MAAM,EAAEL,YAAa;IACrBT,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBT,QAAQ,EAAEA,QAAQ,IAAIS,OAAQ;IAC9BC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEA,EAAG;IACPC,WAAW,EAAGW,CAAC,IAAK;MAClBX,WAAW,CAACW,CAAC,CAAC;MACdA,CAAC,CAACC,cAAc,CAAC,CAAC;IACpB,CAAE;IACFX,SAAS,EAAGU,CAAC,IAAK;MAChBV,SAAS,CAACU,CAAC,CAAC;MACZ,IAAIvB,QAAQ,IAAIS,OAAO,EAAEc,CAAC,CAACC,cAAc,CAAC,CAAC;IAC7C,CAAE;IACF,iBAAexB,QAAQ,IAAIS,OAAQ;IACnC,aAAWA;EAAQ,GACfM,IAAI;IACRC,GAAG,EAAEA;EAAI,iBAETvB,KAAA,CAAA0B,aAAA,CAACvB,aAAa;IACZU,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,OAAO,EAAEA,OAAQ;IACjBS,aAAa,EAAEA;EAAc,GAE5BJ,QACY,CACC,CAAC;AAEvB,CACF,CAAC;AAEDX,UAAU,CAACsB,WAAW,GAAG,YAAY;AAErC,eAAetB,UAAU"}
+{"version":3,"file":"index.js","names":["styled","resetButtonStyles","sizeStyles","clr","omitEmotionProps","React","forwardRef","underlineAlwaysStyles","underlineHoverStyles","StyledButton","p","theme","linkColor","LinkButton","underline","onMouseDown","rest","ref","createElement","_extends","e","preventDefault","displayName"],"sources":["../../../src/LinkButton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { resetButtonStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef } from 'react';\nimport { underlineAlwaysStyles, underlineHoverStyles } from '../Link';\n\ntype JsxButtonProps = Omit<JSX.IntrinsicElements['button'], 'ref'>;\n\nexport interface LinkButtonProps extends JsxButtonProps, WithSize {\n  /**\n   * Type of the underline styles.\n   * @default hover\n   */\n  underline?: 'hover' | 'always' | 'never';\n}\n\nconst StyledButton = styled(\n  'button',\n  omitEmotionProps('size', 'underline')\n)<LinkButtonProps>`\n  ${resetButtonStyles};\n\n  cursor: pointer;\n  text-align: left;\n  line-height: 1.2;\n  color: ${(p) => clr(p.theme.linkColor)};\n\n  ${underlineHoverStyles};\n  ${underlineAlwaysStyles};\n  ${sizeStyles};\n`;\n\n/**\n * The link component that is rendered as a button.\n */\nconst LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(\n  ({ underline = 'hover', onMouseDown = () => {}, ...rest }, ref) => (\n    <StyledButton\n      underline={underline}\n      onMouseDown={(e) => {\n        onMouseDown(e);\n        e.preventDefault();\n      }}\n      {...rest}\n      ref={ref}\n    />\n  )\n);\n\nLinkButton.displayName = 'LinkButton';\n\nexport default LinkButton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,iBAAiB,EAAEC,UAAU,QAAkB,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,SAAS;AAYrE,MAAMC,YAAY,GAAGT,MAAM,CACzB,QAAQ,EACRI,gBAAgB,CAAC,MAAM,EAAE,WAAW,CACtC,CAAmB;AACnB,IAAIH,iBAAkB;AACtB;AACA;AACA;AACA;AACA,WAAYS,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACC,KAAK,CAACC,SAAS,CAAE;AACzC;AACA,IAAIJ,oBAAqB;AACzB,IAAID,qBAAsB;AAC1B,IAAIL,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMW,UAAU,gBAAGP,UAAU,CAC3B,CAAC;EAAEQ,SAAS,GAAG,OAAO;EAAEC,WAAW,GAAGA,CAAA,KAAM,CAAC,CAAC;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC5DZ,KAAA,CAAAa,aAAA,CAACT,YAAY,EAAAU,QAAA;EACXL,SAAS,EAAEA,SAAU;EACrBC,WAAW,EAAGK,CAAC,IAAK;IAClBL,WAAW,CAACK,CAAC,CAAC;IACdA,CAAC,CAACC,cAAc,CAAC,CAAC;EACpB;AAAE,GACEL,IAAI;EACRC,GAAG,EAAEA;AAAI,EACV,CAEL,CAAC;AAEDJ,UAAU,CAACS,WAAW,GAAG,YAAY;AAErC,eAAeT,UAAU"}

package/dist/esm/Select/index.js

@@ -97,7 +97,7 @@ export const Placeholder = styled.span`
   color: ${p => clr(p.theme.inputColorPlaceholder)};
   ${ellipsisStyles};
 `;
-const titleUnborderedTitleStyles = p => p.unbordered && css`
+const titleUnborderedStyles = p => p.unbordered && css`
     font-weight: 500;
     ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
   `;
@@ -106,7 +106,7 @@ const titleDisabledStyles = p => p.disabled && css`
   `;
 export const Title = styled('span', omitEmotionProps('disabled', 'unbordered'))`
   color: ${p => clr(p.theme.colorText)};
-  ${titleUnborderedTitleStyles};
+  ${titleUnborderedStyles};
   ${titleDisabledStyles};
   ${ellipsisStyles};
 `;