@os-design/core 1.0.156 → 1.0.158

package/dist/cjs/BreadcrumbItem/index.js

@@ -1,63 +1,43 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _icons = require("@os-design/icons");
-
 var _theming = require("@os-design/theming");
-
 var _Link = _interopRequireDefault(require("../Link"));
-
 var _excluded = ["currentPage", "hasRightArrow", "position", "href", "children"];
-
 var _templateObject, _templateObject2, _templateObject3;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = _styled["default"].li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n"])));
-
 var Name = _styled["default"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-width: 20em;\n  ", ";\n"])), _styles.ellipsisStyles);
-
 var RightIcon = (0, _styled["default"])(_icons.Right)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 0.6em;\n  font-size: 0.6em;\n  opacity: 0.8;\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 });
+
 /**
  * The item of the breadcrumb.
  */
-
 var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$currentPage = _ref.currentPage,
-      currentPage = _ref$currentPage === void 0 ? false : _ref$currentPage,
-      _ref$hasRightArrow = _ref.hasRightArrow,
-      hasRightArrow = _ref$hasRightArrow === void 0 ? false : _ref$hasRightArrow,
-      position = _ref.position,
-      href = _ref.href,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    currentPage = _ref$currentPage === void 0 ? false : _ref$currentPage,
+    _ref$hasRightArrow = _ref.hasRightArrow,
+    hasRightArrow = _ref$hasRightArrow === void 0 ? false : _ref$hasRightArrow,
+    position = _ref.position,
+    href = _ref.href,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], _extends({
     itemProp: "itemListElement",
     itemScope: true,

package/dist/cjs/BreadcrumbItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","li","Name","span","ellipsisStyles","RightIcon","Right","p","clr","theme","colorText","BreadcrumbItem","forwardRef","ref","currentPage","hasRightArrow","position","href","children","rest","underline","toString","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n  /**\n   * Whether the right arrow located to the right of the text is visible.\n   * @default false\n   */\n  hasRightArrow?: boolean;\n  /**\n   * The position of the breadcrumb item.\n   * @default undefined\n   */\n  position?: number;\n}\n\nconst Container = styled.li`\n  list-style: none;\n`;\n\nconst Name = styled.span`\n  max-width: 20em;\n  ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin: 0 0.6em;\n  font-size: 0.6em;\n  opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n  (\n    {\n      currentPage = false,\n      hasRightArrow = false,\n      position,\n      href,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <Container>\n      <Link\n        itemProp='itemListElement'\n        itemScope\n        itemType='https://schema.org/ListItem'\n        href={href}\n        {...(currentPage\n          ? {\n              underline: 'always',\n              'aria-current': 'page',\n            }\n          : {})}\n        {...rest}\n        ref={ref}\n      >\n        <link itemProp='item' href={href} />\n        {position && <meta itemProp='position' content={position.toString()} />}\n        <Name itemProp='name'>{children}</Name>\n      </Link>\n      {hasRightArrow && <RightIcon role='presentation' />}\n    </Container>\n  )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAoBA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,EAAV,4FAAf;;AAIA,IAAMC,IAAI,GAAGF,kBAAA,CAAOG,IAAV,uGAENC,sBAFM,CAAV;;AAKA,IAAMC,SAAS,GAAG,IAAAL,kBAAA,EAAOM,YAAP,CAAH,oJACJ,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,SAAZ,CAAP;AAAA,CADI,CAAf;AAOA;AACA;AACA;;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAA,EACrB,gBASEC,GATF;EAAA,4BAEIC,WAFJ;EAAA,IAEIA,WAFJ,iCAEkB,KAFlB;EAAA,8BAGIC,aAHJ;EAAA,IAGIA,aAHJ,mCAGoB,KAHpB;EAAA,IAIIC,QAJJ,QAIIA,QAJJ;EAAA,IAKIC,IALJ,QAKIA,IALJ;EAAA,IAMIC,QANJ,QAMIA,QANJ;EAAA,IAOOC,IAPP;;EAAA,oBAWE,gCAAC,SAAD,qBACE,gCAAC,gBAAD;IACE,QAAQ,EAAC,iBADX;IAEE,SAAS,MAFX;IAGE,QAAQ,EAAC,6BAHX;IAIE,IAAI,EAAEF;EAJR,GAKOH,WAAW,GACZ;IACEM,SAAS,EAAE,QADb;IAEE,gBAAgB;EAFlB,CADY,GAKZ,EAVN,EAWMD,IAXN;IAYE,GAAG,EAAEN;EAZP,iBAcE;IAAM,QAAQ,EAAC,MAAf;IAAsB,IAAI,EAAEI;EAA5B,EAdF,EAeGD,QAAQ,iBAAI;IAAM,QAAQ,EAAC,UAAf;IAA0B,OAAO,EAAEA,QAAQ,CAACK,QAAT;EAAnC,EAff,eAgBE,gCAAC,IAAD;IAAM,QAAQ,EAAC;EAAf,GAAuBH,QAAvB,CAhBF,CADF,EAmBGH,aAAa,iBAAI,gCAAC,SAAD;IAAW,IAAI,EAAC;EAAhB,EAnBpB,CAXF;AAAA,CADqB,CAAvB;AAoCAJ,cAAc,CAACW,WAAf,GAA6B,gBAA7B;eAEeX,c"}
+{"version":3,"file":"index.js","names":["Container","styled","li","Name","span","ellipsisStyles","RightIcon","Right","p","clr","theme","colorText","BreadcrumbItem","forwardRef","ref","currentPage","hasRightArrow","position","href","children","rest","underline","toString","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n  /**\n   * Whether the item is the current page.\n   * @default false\n   */\n  currentPage?: boolean;\n  /**\n   * Whether the right arrow located to the right of the text is visible.\n   * @default false\n   */\n  hasRightArrow?: boolean;\n  /**\n   * The position of the breadcrumb item.\n   * @default undefined\n   */\n  position?: number;\n}\n\nconst Container = styled.li`\n  list-style: none;\n`;\n\nconst Name = styled.span`\n  max-width: 20em;\n  ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n  color: ${(p) => clr(p.theme.colorText)};\n  margin: 0 0.6em;\n  font-size: 0.6em;\n  opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n  (\n    {\n      currentPage = false,\n      hasRightArrow = false,\n      position,\n      href,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <Container>\n      <Link\n        itemProp='itemListElement'\n        itemScope\n        itemType='https://schema.org/ListItem'\n        href={href}\n        {...(currentPage\n          ? {\n              underline: 'always',\n              'aria-current': 'page',\n            }\n          : {})}\n        {...rest}\n        ref={ref}\n      >\n        <link itemProp='item' href={href} />\n        {position && <meta itemProp='position' content={position.toString()} />}\n        <Name itemProp='name'>{children}</Name>\n      </Link>\n      {hasRightArrow && <RightIcon role='presentation' />}\n    </Container>\n  )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB1C,IAAMA,SAAS,GAAGC,kBAAM,CAACC,EAAE,4FAE1B;AAED,IAAMC,IAAI,GAAGF,kBAAM,CAACG,IAAI,uGAEpBC,sBAAc,CACjB;AAED,IAAMC,SAAS,GAAG,IAAAL,kBAAM,EAACM,YAAK,CAAC,oJACpB,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,SAAS,CAAC;AAAA,EAIvC;;AAED;AACA;AACA;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,gBASEC,GAAG;EAAA,4BAPDC,WAAW;IAAXA,WAAW,iCAAG,KAAK;IAAA,0BACnBC,aAAa;IAAbA,aAAa,mCAAG,KAAK;IACrBC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAAA,oBAIT,gCAAC,SAAS,qBACR,gCAAC,gBAAI;IACH,QAAQ,EAAC,iBAAiB;IAC1B,SAAS;IACT,QAAQ,EAAC,6BAA6B;IACtC,IAAI,EAAEF;EAAK,GACNH,WAAW,GACZ;IACEM,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE;EAClB,CAAC,GACD,CAAC,CAAC,EACFD,IAAI;IACR,GAAG,EAAEN;EAAI,iBAET;IAAM,QAAQ,EAAC,MAAM;IAAC,IAAI,EAAEI;EAAK,EAAG,EACnCD,QAAQ,iBAAI;IAAM,QAAQ,EAAC,UAAU;IAAC,OAAO,EAAEA,QAAQ,CAACK,QAAQ;EAAG,EAAG,eACvE,gCAAC,IAAI;IAAC,QAAQ,EAAC;EAAM,GAAEH,QAAQ,CAAQ,CAClC,EACNH,aAAa,iBAAI,gCAAC,SAAS;IAAC,IAAI,EAAC;EAAc,EAAG,CACzC;AAAA,CACb,CACF;AAEDJ,cAAc,CAACW,WAAW,GAAG,gBAAgB;AAAC,eAE/BX,cAAc;AAAA"}

package/dist/cjs/Button/ButtonContent.js

@@ -4,37 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _icons = require("@os-design/icons");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var LeftAddon = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inherit;\n  padding-right: ", "em;\n"])), function (p) {
   return p.theme.buttonAddonPaddingHorizontal;
 });
-
 var RightAddon = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inherit;\n  padding-left: ", "em;\n"])), function (p) {
   return p.theme.buttonAddonPaddingHorizontal;
 });
-
 var Content = _styled["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inherit;\n\n  & > svg {\n    transform: scale(", ");\n    vertical-align: middle;\n  }\n"])), function (p) {
   return p.theme.buttonIconScaleFactor;
 });
-
 var LoadingIcon = (0, _styled["default"])(_icons.Loading)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 1.2em;\n"])));
 var loadingFadeIn = (0, _react2.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));
 var LoadingContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('colors'))(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ", ";\n  background-color: ", ";\n  animation: ", " ", "ms;\n"])), function (p) {
@@ -43,20 +30,20 @@ var LoadingContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProp
   return (0, _theming.clr)(p.colors.bg);
 }, loadingFadeIn, function (p) {
   return p.theme.transitionDelay;
-}); // Used by Button, LinkButton
+});
 
+// Used by Button, LinkButton
 var ButtonContent = function ButtonContent(_ref) {
   var left = _ref.left,
-      right = _ref.right,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      loadingColors = _ref.loadingColors,
-      children = _ref.children;
+    right = _ref.right,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    loadingColors = _ref.loadingColors,
+    children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, children), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right), loading && /*#__PURE__*/_react["default"].createElement(LoadingContainer, {
     colors: loadingColors
   }, /*#__PURE__*/_react["default"].createElement(LoadingIcon, null)));
 };
-
 var _default = ButtonContent;
 exports["default"] = _default;
 //# sourceMappingURL=ButtonContent.js.map

package/dist/cjs/Button/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.js","names":["LeftAddon","styled","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","Loading","loadingFadeIn","keyframes","LoadingContainer","omitEmotionProps","clr","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAWA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,GAAV,uHAEI,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFJ,CAAf;;AAKA,IAAMC,UAAU,GAAGL,kBAAA,CAAOC,GAAV,wHAEE,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,4BAAf;AAAA,CAFF,CAAhB;;AAKA,IAAME,OAAO,GAAGN,kBAAA,CAAOO,IAAV,6KAIU,UAACL,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAf;AAAA,CAJV,CAAb;;AASA,IAAMC,WAAW,GAAG,IAAAT,kBAAA,EAAOU,cAAP,CAAH,8FAAjB;AAIA,IAAMC,aAAa,OAAGC,iBAAH,wHAAnB;AAQA,IAAMC,gBAAgB,GAAG,IAAAb,kBAAA,EACvB,KADuB,EAEvB,IAAAc,uBAAA,EAAiB,QAAjB,CAFuB,CAAH,8TAeX,UAACZ,CAAD;EAAA,OAAO,IAAAa,YAAA,EAAIb,CAAC,CAACc,MAAF,CAASC,IAAb,CAAP;AAAA,CAfW,EAgBA,UAACf,CAAD;EAAA,OAAO,IAAAa,YAAA,EAAIb,CAAC,CAACc,MAAF,CAASE,EAAb,CAAP;AAAA,CAhBA,EAiBPP,aAjBO,EAiBU,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQgB,eAAf;AAAA,CAjBV,CAAtB,C,CAoBA;;AACA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C;EAAA,IAClDC,IADkD,QAClDA,IADkD;EAAA,IAElDC,KAFkD,QAElDA,KAFkD;EAAA,wBAGlDC,OAHkD;EAAA,IAGlDA,OAHkD,6BAGxC,KAHwC;EAAA,IAIlDC,aAJkD,QAIlDA,aAJkD;EAAA,IAKlDC,QALkD,QAKlDA,QALkD;EAAA,oBAOlD,kEACGJ,IAAI,iBAAI,gCAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,gCAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,gCAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,gCAAC,gBAAD;IAAkB,MAAM,EAAEC;EAA1B,gBACE,gCAAC,WAAD,OADF,CALJ,CAPkD;AAAA,CAApD;;eAmBeJ,a"}
+{"version":3,"file":"ButtonContent.js","names":["LeftAddon","styled","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","Loading","loadingFadeIn","keyframes","LoadingContainer","omitEmotionProps","clr","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n  left?: React.ReactNode;\n  right?: React.ReactNode;\n  loading?: boolean;\n  loadingColors: LoadingColors;\n  children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n  display: inherit;\n  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n  display: inherit;\n  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n  display: inherit;\n\n  & > svg {\n    transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n    vertical-align: middle;\n  }\n`;\n\nconst LoadingIcon = styled(Loading)`\n  font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n  colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n  'div',\n  omitEmotionProps('colors')\n)<LoadingContainerProps>`\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: inherit;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  color: ${(p) => clr(p.colors.text)};\n  background-color: ${(p) => clr(p.colors.bg)};\n  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n  left,\n  right,\n  loading = false,\n  loadingColors,\n  children,\n}) => (\n  <>\n    {left && <LeftAddon>{left}</LeftAddon>}\n    <Content>{children}</Content>\n    {right && <RightAddon>{right}</RightAddon>}\n    {loading && (\n      <LoadingContainer colors={loadingColors}>\n        <LoadingIcon />\n      </LoadingContainer>\n    )}\n  </>\n);\n\nexport default ButtonContent;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAyC;AAAA;AAAA;AAWzC,IAAMA,SAAS,GAAGC,kBAAM,CAACC,GAAG,uHAET,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,4BAA4B;AAAA,EAC7D;AAED,IAAMC,UAAU,GAAGL,kBAAM,CAACC,GAAG,wHAEX,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,4BAA4B;AAAA,EAC5D;AAED,IAAME,OAAO,GAAGN,kBAAM,CAACO,IAAI,6KAIJ,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,qBAAqB;AAAA,EAG1D;AAED,IAAMC,WAAW,GAAG,IAAAT,kBAAM,EAACU,cAAO,CAAC,8FAElC;AAED,IAAMC,aAAa,OAAGC,iBAAS,wHAG9B;AAKD,IAAMC,gBAAgB,GAAG,IAAAb,kBAAM,EAC7B,KAAK,EACL,IAAAc,uBAAgB,EAAC,QAAQ,CAAC,CAC3B,8TAYU,UAACZ,CAAC;EAAA,OAAK,IAAAa,YAAG,EAACb,CAAC,CAACc,MAAM,CAACC,IAAI,CAAC;AAAA,GACd,UAACf,CAAC;EAAA,OAAK,IAAAa,YAAG,EAACb,CAAC,CAACc,MAAM,CAACE,EAAE,CAAC;AAAA,GAC9BP,aAAa,EAAI,UAACT,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACgB,eAAe;AAAA,EAC7D;;AAED;AACA,IAAMC,aAA2C,GAAG,SAA9CA,aAA2C;EAAA,IAC/CC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,aAAa,QAAbA,aAAa;IACbC,QAAQ,QAARA,QAAQ;EAAA,oBAER,kEACGJ,IAAI,iBAAI,gCAAC,SAAS,QAAEA,IAAI,CAAa,eACtC,gCAAC,OAAO,QAAEI,QAAQ,CAAW,EAC5BH,KAAK,iBAAI,gCAAC,UAAU,QAAEA,KAAK,CAAc,EACzCC,OAAO,iBACN,gCAAC,gBAAgB;IAAC,MAAM,EAAEC;EAAc,gBACtC,gCAAC,WAAW,OAAG,CAElB,CACA;AAAA,CACJ;AAAC,eAEaJ,aAAa;AAAA"}

package/dist/cjs/Button/index.js

@@ -1,76 +1,49 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.StyledButton = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _react2 = require("@emotion/react");
-
 var _media = require("@os-design/media");
-
 var _useButtonColors2 = _interopRequireDefault(require("./utils/useButtonColors"));
-
 var _ButtonContent = _interopRequireDefault(require("./ButtonContent"));
-
 var _excluded = ["type", "danger", "left", "right", "wide", "loading", "disabled", "size", "children", "onMouseDown"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var hoverStyles = function hoverStyles(p) {
   return !p.disabled && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      &:hover,\n      &:focus {\n        background-color: ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.colors.bgHover));
 };
-
 var primaryStyles = function primaryStyles(p) {
   return p.btnType === 'primary' && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", ";\n    background-color: ", ";\n    ", ";\n  "])), (0, _theming.clr)(p.colors.text), (0, _theming.clr)(p.colors.bg), hoverStyles(p));
 };
-
 var ghostStyles = function ghostStyles(p) {
   return p.btnType === 'ghost' && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: ", ";\n    background-color: transparent;\n    ", ";\n  "])), (0, _theming.clr)(p.colors.text), hoverStyles(p));
 };
-
 var outlineStyles = function outlineStyles(p) {
   return p.btnType === 'outline' && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n    background-color: transparent;\n    border: 1px solid currentColor;\n    ", ";\n  "])), (0, _theming.clr)(p.colors.text), hoverStyles(p));
 };
-
 var wideDefaultStyles = function wideDefaultStyles(p) {
   return p.wide === 'default' && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", " {\n      width: 100%;\n    }\n  "])), _media.m.max.xxs);
 };
-
 var wideAlwaysStyles = function wideAlwaysStyles(p) {
   return p.wide === 'always' && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 100%;\n  "])));
 };
-
 var disabledStyles = function disabledStyles(p) {
   return p.disabled && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n  "])));
 };
-
 var StyledButton = (0, _styled["default"])('button', (0, _utils.omitEmotionProps)('btnType', 'colors', 'wide', 'loading', 'size'))(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\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: ", "em;\n  height: ", "em;\n  padding: 0 ", "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  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n"])), _styles.resetButtonStyles, function (p) {
   return p.theme.borderRadius;
 }, function (p) {
@@ -78,38 +51,36 @@ var StyledButton = (0, _styled["default"])('button', (0, _utils.omitEmotionProps
 }, function (p) {
   return p.theme.buttonPaddingHorizontal;
 }, primaryStyles, outlineStyles, ghostStyles, wideDefaultStyles, wideAlwaysStyles, disabledStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('background-color', 'color'));
+
 /**
  * Used to trigger the corresponding business logic.
  */
-
 exports.StyledButton = StyledButton;
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'primary' : _ref$type,
-      _ref$danger = _ref.danger,
-      danger = _ref$danger === void 0 ? false : _ref$danger,
-      left = _ref.left,
-      right = _ref.right,
-      _ref$wide = _ref.wide,
-      wide = _ref$wide === void 0 ? 'default' : _ref$wide,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      size = _ref.size,
-      children = _ref.children,
-      _ref$onMouseDown = _ref.onMouseDown,
-      _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    type = _ref$type === void 0 ? 'primary' : _ref$type,
+    _ref$danger = _ref.danger,
+    danger = _ref$danger === void 0 ? false : _ref$danger,
+    left = _ref.left,
+    right = _ref.right,
+    _ref$wide = _ref.wide,
+    wide = _ref$wide === void 0 ? 'default' : _ref$wide,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    size = _ref.size,
+    children = _ref.children,
+    _ref$onMouseDown = _ref.onMouseDown,
+    _onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useButtonColors = (0, _useButtonColors2["default"])({
-    type: type,
-    danger: danger,
-    disabled: disabled
-  }),
-      buttonColors = _useButtonColors.buttonColors,
-      loadingColors = _useButtonColors.loadingColors;
-
+      type: type,
+      danger: danger,
+      disabled: disabled
+    }),
+    buttonColors = _useButtonColors.buttonColors,
+    loadingColors = _useButtonColors.loadingColors;
   return /*#__PURE__*/_react["default"].createElement(StyledButton, _extends({
     btnType: type,
     colors: buttonColors,
@@ -119,7 +90,6 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: size,
     onMouseDown: function onMouseDown(e) {
       _onMouseDown(e);
-
       e.preventDefault();
     },
     "aria-busy": loading

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["hoverStyles","p","disabled","css","clr","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","m","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","styled","omitEmotionProps","resetButtonStyles","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","sizeStyles","transitionStyles","Button","forwardRef","ref","type","danger","left","right","loading","size","children","onMouseDown","rest","useButtonColors","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\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":["hoverStyles","p","disabled","css","clr","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","m","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","styled","omitEmotionProps","resetButtonStyles","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","sizeStyles","transitionStyles","Button","forwardRef","ref","type","danger","left","right","loading","size","children","onMouseDown","rest","useButtonColors","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  resetButtonStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\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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"}

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

@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = require("react");
-
 var _theming = require("@os-design/theming");
-
 // Used by Button, LinkButton
 var useButtonColors = function useButtonColors(_ref) {
   var type = _ref.type,
-      danger = _ref.danger,
-      disabled = _ref.disabled;
-
+    danger = _ref.danger,
+    disabled = _ref.disabled;
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
+    theme = _useTheme.theme;
   var prefix = (0, _react.useMemo)(function () {
     if (danger) return 'Danger';
     return '';
@@ -33,7 +28,6 @@ var useButtonColors = function useButtonColors(_ref) {
         bg: theme.buttonDisabledPrimaryColorBg
       };
     }
-
     return !disabled ? {
       text: theme["button".concat(prefix, "GhostColorText")],
       bgHover: theme["button".concat(prefix, "GhostColorBgHover")]
@@ -48,14 +42,12 @@ var useButtonColors = function useButtonColors(_ref) {
         bg: theme.buttonDisabledPrimaryColorBg
       };
     }
-
     if (type === 'primary') {
       return {
         text: theme["button".concat(prefix, "PrimaryColorLoadingText")],
         bg: theme["button".concat(prefix, "PrimaryColorLoadingBg")]
       };
     }
-
     return {
       text: theme["button".concat(prefix, "GhostColorLoadingText")],
       bg: theme["button".concat(prefix, "GhostColorLoadingBg")]
@@ -66,7 +58,6 @@ var useButtonColors = function useButtonColors(_ref) {
     loadingColors: loadingColors
   };
 };
-
 var _default = useButtonColors;
 exports["default"] = _default;
 //# sourceMappingURL=useButtonColors.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useButtonColors.js","names":["useButtonColors","type","danger","disabled","useTheme","theme","prefix","useMemo","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\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;;AACA;;AAwBA;AACA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,OAIS;EAAA,IAH/BC,IAG+B,QAH/BA,IAG+B;EAAA,IAF/BC,MAE+B,QAF/BA,MAE+B;EAAA,IAD/BC,QAC+B,QAD/BA,QAC+B;;EAC/B,gBAAkB,IAAAC,iBAAA,GAAlB;EAAA,IAAQC,KAAR,aAAQA,KAAR;;EAEA,IAAMC,MAAM,GAAG,IAAAC,cAAA,EAAgB,YAAM;IACnC,IAAIL,MAAJ,EAAY,OAAO,QAAP;IACZ,OAAO,EAAP;EACD,CAHc,EAGZ,CAACA,MAAD,CAHY,CAAf;EAKA,IAAMM,YAAY,GAAG,IAAAD,cAAA,EAAsB,YAAM;IAC/C,IAAIN,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAO,CAACE,QAAD,GACH;QACEM,IAAI,EAAEJ,KAAK,iBAAUC,MAAV,sBADb;QAEEI,EAAE,EAAEL,KAAK,iBAAUC,MAAV,oBAFX;QAGEK,OAAO,EAAEN,KAAK,iBAAUC,MAAV;MAHhB,CADG,GAMH;QACEG,IAAI,EAAEJ,KAAK,CAACO,8BADd;QAEEF,EAAE,EAAEL,KAAK,CAACQ;MAFZ,CANJ;IAUD;;IACD,OAAO,CAACV,QAAD,GACH;MACEM,IAAI,EAAEJ,KAAK,iBAAUC,MAAV,oBADb;MAEEK,OAAO,EAAEN,KAAK,iBAAUC,MAAV;IAFhB,CADG,GAKH;MACEG,IAAI,EAAEJ,KAAK,CAACS;IADd,CALJ;EAQD,CArBoB,EAqBlB,CAACb,IAAD,EAAOE,QAAP,EAAiBE,KAAjB,EAAwBC,MAAxB,CArBkB,CAArB;EAuBA,IAAMS,aAAa,GAAG,IAAAR,cAAA,EAAuB,YAAM;IACjD,IAAIJ,QAAJ,EAAc;MACZ,OAAO;QACLM,IAAI,EAAEJ,KAAK,CAACO,8BADP;QAELF,EAAE,EAAEL,KAAK,CAACQ;MAFL,CAAP;IAID;;IACD,IAAIZ,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAO;QACLQ,IAAI,EAAEJ,KAAK,iBAAUC,MAAV,6BADN;QAELI,EAAE,EAAEL,KAAK,iBAAUC,MAAV;MAFJ,CAAP;IAID;;IACD,OAAO;MACLG,IAAI,EAAEJ,KAAK,iBAAUC,MAAV,2BADN;MAELI,EAAE,EAAEL,KAAK,iBAAUC,MAAV;IAFJ,CAAP;EAID,CAjBqB,EAiBnB,CAACH,QAAD,EAAWF,IAAX,EAAiBI,KAAjB,EAAwBC,MAAxB,CAjBmB,CAAtB;EAmBA,OAAO;IAAEE,YAAY,EAAZA,YAAF;IAAgBO,aAAa,EAAbA;EAAhB,CAAP;AACD,CAvDD;;eAyDef,e"}
+{"version":3,"file":"useButtonColors.js","names":["useButtonColors","type","danger","disabled","useTheme","theme","prefix","useMemo","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\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;AACA;AAwBA;AACA,IAAMA,eAAe,GAAG,SAAlBA,eAAe,OAIY;EAAA,IAH/BC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;EAER,gBAAkB,IAAAC,iBAAQ,GAAE;IAApBC,KAAK,aAALA,KAAK;EAEb,IAAMC,MAAM,GAAG,IAAAC,cAAO,EAAS,YAAM;IACnC,IAAIL,MAAM,EAAE,OAAO,QAAQ;IAC3B,OAAO,EAAE;EACX,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,IAAMM,YAAY,GAAG,IAAAD,cAAO,EAAe,YAAM;IAC/C,IAAIN,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO,CAACE,QAAQ,GACZ;QACEM,IAAI,EAAEJ,KAAK,iBAAUC,MAAM,sBAAmB;QAC9CI,EAAE,EAAEL,KAAK,iBAAUC,MAAM,oBAAiB;QAC1CK,OAAO,EAAEN,KAAK,iBAAUC,MAAM;MAChC,CAAC,GACD;QACEG,IAAI,EAAEJ,KAAK,CAACO,8BAA8B;QAC1CF,EAAE,EAAEL,KAAK,CAACQ;MACZ,CAAC;IACP;IACA,OAAO,CAACV,QAAQ,GACZ;MACEM,IAAI,EAAEJ,KAAK,iBAAUC,MAAM,oBAAiB;MAC5CK,OAAO,EAAEN,KAAK,iBAAUC,MAAM;IAChC,CAAC,GACD;MACEG,IAAI,EAAEJ,KAAK,CAACS;IACd,CAAC;EACP,CAAC,EAAE,CAACb,IAAI,EAAEE,QAAQ,EAAEE,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,IAAMS,aAAa,GAAG,IAAAR,cAAO,EAAgB,YAAM;IACjD,IAAIJ,QAAQ,EAAE;MACZ,OAAO;QACLM,IAAI,EAAEJ,KAAK,CAACO,8BAA8B;QAC1CF,EAAE,EAAEL,KAAK,CAACQ;MACZ,CAAC;IACH;IACA,IAAIZ,IAAI,KAAK,SAAS,EAAE;MACtB,OAAO;QACLQ,IAAI,EAAEJ,KAAK,iBAAUC,MAAM,6BAA0B;QACrDI,EAAE,EAAEL,KAAK,iBAAUC,MAAM;MAC3B,CAAC;IACH;IACA,OAAO;MACLG,IAAI,EAAEJ,KAAK,iBAAUC,MAAM,2BAAwB;MACnDI,EAAE,EAAEL,KAAK,iBAAUC,MAAM;IAC3B,CAAC;EACH,CAAC,EAAE,CAACH,QAAQ,EAAEF,IAAI,EAAEI,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnC,OAAO;IAAEE,YAAY,EAAZA,YAAY;IAAEO,aAAa,EAAbA;EAAc,CAAC;AACxC,CAAC;AAAC,eAEaf,eAAe;AAAA"}