@skbkontur/react-ui 0.0.0-5188be76c1 → 0.0.0-53ccdcbfcc

package/components/Clickable/ClickableButtonCaption/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonCaption.js",
+  "module": "ClickableButtonCaption",
+  "types": "../ClickableButtonCaption.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonCaption.d.ts

@@ -0,0 +1,2 @@
+import { ClickableProps } from './Clickable';
+export declare const ClickableButtonCaption: ({ leftIcon, rightIcon, isDisabled, isLoading, size, children, }: ClickableProps) => JSX.Element;

package/components/Clickable/ClickableButtonCaption.styles/ClickableButtonCaption.styles.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonCaptionStyles = memoizeStyle({
+  buttonCaption: function buttonCaption() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "])));
+  },
+  buttonCaptionDisabled: function buttonCaptionDisabled() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transform: none !important; // override root:active style\n    "])));
+  },
+  buttonVisibilityHidden: function buttonVisibilityHidden() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      visibility: hidden;\n    "])));
+  }
+});

package/components/Clickable/ClickableButtonCaption.styles/ClickableButtonCaption.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonCaption.styles.ts"],"names":["css","memoizeStyle","buttonCaptionStyles","buttonCaption","buttonCaptionDisabled","buttonVisibilityHidden"],"mappings":"wJAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,YAAY,CAAC;AAC9CE,EAAAA,aAD8C,2BAC9B;AACd,WAAOH,GAAP;;;;;;;AAOD,GAT6C;AAU9CI,EAAAA,qBAV8C,mCAUtB;AACtB,WAAOJ,GAAP;;;AAGD,GAd6C;;AAgB9CK,EAAAA,sBAhB8C,oCAgBrB;AACvB,WAAOL,GAAP;;;AAGD,GApB6C,EAAD,CAAxC","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonCaptionStyles = memoizeStyle({\n  buttonCaption() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    `;\n  },\n  buttonCaptionDisabled() {\n    return css`\n      transform: none !important; // override root:active style\n    `;\n  },\n\n  buttonVisibilityHidden() {\n    return css`\n      visibility: hidden;\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonCaption.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonCaption.styles.js",
+  "module": "ClickableButtonCaption.styles",
+  "types": "../ClickableButtonCaption.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonCaption.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const buttonCaptionStyles: {
+    buttonCaption(): string;
+    buttonCaptionDisabled(): string;
+    buttonVisibilityHidden(): string;
+};

package/components/Clickable/ClickableButtonIcon/ClickableButtonIcon.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import { isKonturIcon } from "../../../lib/utils";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { buttonIconStyles, getButtonIconSizeClassName } from "../ClickableButtonIcon.styles";
+import { ClickableButtonLoadingIcon } from "../ClickableButtonLoadingIcon";
+import { buttonGlobalClasses } from "../ClickableButton.styles";
+
+var getButtonIconSizes = function getButtonIconSizes(theme) {
+  return {
+    small: parseInt(theme.btnIconSizeSmall),
+    medium: parseInt(theme.btnIconSizeMedium),
+    large: parseInt(theme.btnIconSizeLarge)
+  };
+};
+
+var getIcon = function getIcon(icon, size, theme) {
+  if (icon && /*#__PURE__*/React.isValidElement(icon) && isKonturIcon(icon)) {
+    var _icon$props$size;
+
+    var sizes = getButtonIconSizes(theme);
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[size]
+    });
+  }
+
+  return icon;
+};
+
+export var ClickableButtonIcon = function ClickableButtonIcon(_ref) {
+  var _extends2, _extends3;
+
+  var icon = _ref.icon,
+      position = _ref.position,
+      children = _ref.children,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$hasBothIcons = _ref.hasBothIcons,
+      hasBothIcons = _ref$hasBothIcons === void 0 ? false : _ref$hasBothIcons,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size;
+  var theme = useContext(ThemeContext);
+  var hasNoChildren = !children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx(_extends((_extends2 = {}, _extends2[buttonGlobalClasses.icon] = true, _extends2[buttonIconStyles.icon()] = true, _extends2), getButtonIconSizeClassName(size, position, theme), (_extends3 = {}, _extends3[buttonIconStyles.iconNoMargin()] = hasNoChildren, _extends3)))
+  }, isLoading && !hasBothIcons ? /*#__PURE__*/React.createElement(ClickableButtonLoadingIcon, {
+    isCentered: false,
+    size: size
+  }) : getIcon(icon, size, theme));
+};

package/components/Clickable/ClickableButtonIcon/ClickableButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonIcon.tsx"],"names":["React","useContext","isKonturIcon","cx","ThemeContext","buttonIconStyles","getButtonIconSizeClassName","ClickableButtonLoadingIcon","buttonGlobalClasses","getButtonIconSizes","theme","small","parseInt","btnIconSizeSmall","medium","btnIconSizeMedium","large","btnIconSizeLarge","getIcon","icon","size","isValidElement","sizes","cloneElement","props","ClickableButtonIcon","position","children","isLoading","hasBothIcons","hasNoChildren","iconNoMargin"],"mappings":"0DAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;;AAGA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;;;AAIA,SAASC,gBAAT,EAA2BC,0BAA3B,QAA6D,8BAA7D;AACA,SAASC,0BAAT,QAA2C,8BAA3C;AACA,SAASC,mBAAT,QAAoC,0BAApC;;;;;;;;AAQA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAA4C;AACrE,SAAO;AACLC,IAAAA,KAAK,EAAEC,QAAQ,CAACF,KAAK,CAACG,gBAAP,CADV;AAELC,IAAAA,MAAM,EAAEF,QAAQ,CAACF,KAAK,CAACK,iBAAP,CAFX;AAGLC,IAAAA,KAAK,EAAEJ,QAAQ,CAACF,KAAK,CAACO,gBAAP,CAHV,EAAP;;AAKD,CAND;;AAQA,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAwBC,IAAxB,EAAwCV,KAAxC,EAAyD;AACvE,MAAIS,IAAI,iBAAInB,KAAK,CAACqB,cAAN,CAAqBF,IAArB,CAAR,IAAsCjB,YAAY,CAACiB,IAAD,CAAtD,EAA8D;AAC5D,QAAMG,KAAK,GAAGb,kBAAkB,CAACC,KAAD,CAAhC;AACA,wBAAOV,KAAK,CAACuB,YAAN,CAAmBJ,IAAnB,EAAyB,EAAEC,IAAI,sBAAED,IAAI,CAACK,KAAL,CAAWJ,IAAb,+BAAqBE,KAAK,CAACF,IAAD,CAAhC,EAAzB,CAAP;AACD;;AAED,SAAOD,IAAP;AACD,CAPD;;AASA,OAAO,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAsB;;;;;;;AAOH,8BAN9BN,IAM8B,QAN9BA,IAM8B,CAL9BO,QAK8B,QAL9BA,QAK8B,CAJ9BC,QAI8B,QAJ9BA,QAI8B,uBAH9BC,SAG8B,CAH9BA,SAG8B,+BAHlB,KAGkB,2CAF9BC,YAE8B,CAF9BA,YAE8B,kCAFf,KAEe,sCAD9BT,IAC8B,CAD9BA,IAC8B,0BADvB,OACuB;AAC9B,MAAMV,KAAK,GAAGT,UAAU,CAACG,YAAD,CAAxB;AACA,MAAM0B,aAAa,GAAG,CAACH,QAAvB;;AAEA;AACE;AACE,MAAA,SAAS,EAAExB,EAAE;AACVK,MAAAA,mBAAmB,CAACW,IADV,IACiB,IADjB;AAEVd,MAAAA,gBAAgB,CAACc,IAAjB,EAFU,IAEgB,IAFhB;AAGRb,MAAAA,0BAA0B,CAACc,IAAD,EAAOM,QAAP,EAAiBhB,KAAjB,CAHlB;AAIVL,MAAAA,gBAAgB,CAAC0B,YAAjB,EAJU,IAIwBD,aAJxB,cADf;;;AAQGF,IAAAA,SAAS,IAAI,CAACC,YAAd;AACC,wBAAC,0BAAD,IAA4B,UAAU,EAAE,KAAxC,EAA+C,IAAI,EAAET,IAArD,GADD;;AAGCF,IAAAA,OAAO,CAACC,IAAD,EAAOC,IAAP,EAAaV,KAAb,CAXX,CADF;;;;AAgBD,CA3BM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { isKonturIcon } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { ClickableProps } from './Clickable';\nimport { buttonIconStyles, getButtonIconSizeClassName } from './ClickableButtonIcon.styles';\nimport { ClickableButtonLoadingIcon } from './ClickableButtonLoadingIcon';\nimport { buttonGlobalClasses } from './ClickableButton.styles';\n\nexport interface ClickableButtonIconProps extends Pick<ClickableProps, 'size' | 'isLoading' | 'children'> {\n  icon: ClickableProps['leftIcon'];\n  position: 'right' | 'left';\n  hasBothIcons?: boolean;\n}\n\nconst getButtonIconSizes = (theme: Theme): Record<SizeProp, number> => {\n  return {\n    small: parseInt(theme.btnIconSizeSmall),\n    medium: parseInt(theme.btnIconSizeMedium),\n    large: parseInt(theme.btnIconSizeLarge),\n  };\n};\n\nconst getIcon = (icon: React.ReactNode, size: SizeProp, theme: Theme) => {\n  if (icon && React.isValidElement(icon) && isKonturIcon(icon)) {\n    const sizes = getButtonIconSizes(theme);\n    return React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  return icon;\n};\n\nexport const ClickableButtonIcon = ({\n  icon,\n  position,\n  children,\n  isLoading = false,\n  hasBothIcons = false,\n  size = 'small',\n}: ClickableButtonIconProps) => {\n  const theme = useContext(ThemeContext);\n  const hasNoChildren = !children;\n\n  return (\n    <span\n      className={cx({\n        [buttonGlobalClasses.icon]: true,\n        [buttonIconStyles.icon()]: true,\n        ...getButtonIconSizeClassName(size, position, theme),\n        [buttonIconStyles.iconNoMargin()]: hasNoChildren,\n      })}\n    >\n      {isLoading && !hasBothIcons ? (\n        <ClickableButtonLoadingIcon isCentered={false} size={size} />\n      ) : (\n        getIcon(icon, size, theme)\n      )}\n    </span>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonIcon.js",
+  "module": "ClickableButtonIcon",
+  "types": "../ClickableButtonIcon.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonIcon.d.ts

@@ -0,0 +1,7 @@
+import { ClickableProps } from './Clickable';
+export interface ClickableButtonIconProps extends Pick<ClickableProps, 'size' | 'isLoading' | 'children'> {
+    icon: ClickableProps['leftIcon'];
+    position: 'right' | 'left';
+    hasBothIcons?: boolean;
+}
+export declare const ClickableButtonIcon: ({ icon, position, children, isLoading, hasBothIcons, size, }: ClickableButtonIconProps) => JSX.Element;

package/components/Clickable/ClickableButtonIcon.styles/ClickableButtonIcon.styles.js

@@ -0,0 +1,58 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import { ZERO_WIDTH_SPACE_CSS } from "../../../lib/chars";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonIconStyles = memoizeStyle({
+  icon: function icon() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '", "';\n      }\n    "])), ZERO_WIDTH_SPACE_CSS);
+  },
+  iconSmall: function iconSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.btnIconSizeSmall);
+  },
+  iconSmallLeft: function iconSmallLeft(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.btnIconGapSmall);
+  },
+  iconSmallRight: function iconSmallRight(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.btnIconGapSmallRight);
+  },
+  iconMedium: function iconMedium(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.btnIconSizeMedium);
+  },
+  iconMediumLeft: function iconMediumLeft(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.btnIconGapMediumRight);
+  },
+  iconMediumRight: function iconMediumRight(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.btnIconGapMedium);
+  },
+  iconLarge: function iconLarge(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.btnIconSizeLarge);
+  },
+  iconLargeLeft: function iconLargeLeft(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.btnIconGapLarge);
+  },
+  iconLargeRight: function iconLargeRight(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.btnIconGapLargeRight);
+  },
+  iconNoMargin: function iconNoMargin() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-right: 0;\n      margin-left: 0;\n    "])));
+  }
+});
+export var getButtonIconSizeClassName = function getButtonIconSizeClassName(size, position, theme) {
+  var _ref3;
+
+  if (size === 'large') {
+    var _ref;
+
+    return _ref = {}, _ref[buttonIconStyles.iconLarge(theme)] = true, _ref[buttonIconStyles.iconLargeLeft(theme)] = position === 'left', _ref[buttonIconStyles.iconLargeRight(theme)] = position === 'right', _ref;
+  }
+
+  if (size === 'medium') {
+    var _ref2;
+
+    return _ref2 = {}, _ref2[buttonIconStyles.iconMedium(theme)] = true, _ref2[buttonIconStyles.iconMediumLeft(theme)] = position === 'left', _ref2[buttonIconStyles.iconMediumRight(theme)] = position === 'right', _ref2;
+  }
+
+  return _ref3 = {}, _ref3[buttonIconStyles.iconSmall(theme)] = true, _ref3[buttonIconStyles.iconSmallLeft(theme)] = position === 'left', _ref3[buttonIconStyles.iconSmallRight(theme)] = position === 'right', _ref3;
+};

package/components/Clickable/ClickableButtonIcon.styles/ClickableButtonIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonIcon.styles.ts"],"names":["ZERO_WIDTH_SPACE_CSS","css","memoizeStyle","buttonIconStyles","icon","iconSmall","t","btnIconSizeSmall","iconSmallLeft","btnIconGapSmall","iconSmallRight","btnIconGapSmallRight","iconMedium","btnIconSizeMedium","iconMediumLeft","btnIconGapMediumRight","iconMediumRight","btnIconGapMedium","iconLarge","btnIconSizeLarge","iconLargeLeft","btnIconGapLarge","iconLargeRight","btnIconGapLargeRight","iconNoMargin","getButtonIconSizeClassName","size","position","theme"],"mappings":"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","sourcesContent":["import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonIconProps } from './ClickableButtonIcon';\n\nexport const buttonIconStyles = memoizeStyle({\n  icon() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n\n      &::before {\n        content: '${ZERO_WIDTH_SPACE_CSS}';\n      }\n    `;\n  },\n\n  iconSmall(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  iconSmallLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapSmall};\n    `;\n  },\n\n  iconSmallRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapSmallRight};\n    `;\n  },\n\n  iconMedium(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  iconMediumLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapMediumRight};\n    `;\n  },\n\n  iconMediumRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapMedium};\n    `;\n  },\n\n  iconLarge(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  iconLargeLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapLarge};\n    `;\n  },\n\n  iconLargeRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapLargeRight};\n    `;\n  },\n\n  iconNoMargin() {\n    return css`\n      margin-right: 0;\n      margin-left: 0;\n    `;\n  },\n});\n\nexport const getButtonIconSizeClassName = (\n  size: ClickableProps['size'],\n  position: ClickableButtonIconProps['position'],\n  theme: Theme,\n) => {\n  if (size === 'large') {\n    return {\n      [buttonIconStyles.iconLarge(theme)]: true,\n      [buttonIconStyles.iconLargeLeft(theme)]: position === 'left',\n      [buttonIconStyles.iconLargeRight(theme)]: position === 'right',\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      [buttonIconStyles.iconMedium(theme)]: true,\n      [buttonIconStyles.iconMediumLeft(theme)]: position === 'left',\n      [buttonIconStyles.iconMediumRight(theme)]: position === 'right',\n    };\n  }\n\n  return {\n    [buttonIconStyles.iconSmall(theme)]: true,\n    [buttonIconStyles.iconSmallLeft(theme)]: position === 'left',\n    [buttonIconStyles.iconSmallRight(theme)]: position === 'right',\n  };\n};\n"]}

package/components/Clickable/ClickableButtonIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonIcon.styles.js",
+  "module": "ClickableButtonIcon.styles",
+  "types": "../ClickableButtonIcon.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonIcon.styles.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../lib/theming/Theme';
+import { ClickableProps } from './Clickable';
+import { ClickableButtonIconProps } from './ClickableButtonIcon';
+export declare const buttonIconStyles: {
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconSmallLeft(t: Theme): string;
+    iconSmallRight(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconMediumLeft(t: Theme): string;
+    iconMediumRight(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconLargeLeft(t: Theme): string;
+    iconLargeRight(t: Theme): string;
+    iconNoMargin(): string;
+};
+export declare const getButtonIconSizeClassName: (size: ClickableProps['size'], position: ClickableButtonIconProps['position'], theme: Theme) => {
+    [x: string]: boolean;
+};

package/components/Clickable/ClickableButtonLoadingIcon/ClickableButtonLoadingIcon.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { LoadingIcon } from "../../../internal/icons2022/LoadingIcon";
+import { ClickableDataTids } from "../Clickable";
+import { buttonLoadingIconStyles } from "../ClickableButtonLoadingIcon.styles";
+export var ClickableButtonLoadingIcon = function ClickableButtonLoadingIcon(_ref) {
+  var _cx;
+
+  var size = _ref.size,
+      _ref$isCentered = _ref.isCentered,
+      isCentered = _ref$isCentered === void 0 ? true : _ref$isCentered;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-tid": ClickableDataTids.spinner,
+    className: cx((_cx = {}, _cx[buttonLoadingIconStyles.buttonLoading()] = isCentered, _cx))
+  }, /*#__PURE__*/React.createElement(LoadingIcon, {
+    size: size
+  }));
+};

package/components/Clickable/ClickableButtonLoadingIcon/ClickableButtonLoadingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonLoadingIcon.tsx"],"names":["React","cx","LoadingIcon","ClickableDataTids","buttonLoadingIconStyles","ClickableButtonLoadingIcon","size","isCentered","spinner","buttonLoading"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,sCAA5B;;AAEA,SAASC,iBAAT,QAAkD,aAAlD;AACA,SAASC,uBAAT,QAAwC,qCAAxC;;;;;;AAMA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,OAAkE,aAA/DC,IAA+D,QAA/DA,IAA+D,wBAAzDC,UAAyD,CAAzDA,UAAyD,gCAA5C,IAA4C;AAC1G;AACE,iCAAK,YAAUJ,iBAAiB,CAACK,OAAjC,EAA0C,SAAS,EAAEP,EAAE,gBAAIG,uBAAuB,CAACK,aAAxB,EAAJ,IAA8CF,UAA9C,OAAvD;AACE,wBAAC,WAAD,IAAa,IAAI,EAAED,IAAnB,GADF,CADF;;;AAKD,CANM","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon';\n\nimport { ClickableDataTids, ClickableProps } from './Clickable';\nimport { buttonLoadingIconStyles } from './ClickableButtonLoadingIcon.styles';\n\ninterface ClickableButtonLoadingIconProps extends Pick<ClickableProps, 'size'> {\n  isCentered?: boolean;\n}\n\nexport const ClickableButtonLoadingIcon = ({ size, isCentered = true }: ClickableButtonLoadingIconProps) => {\n  return (\n    <div data-tid={ClickableDataTids.spinner} className={cx({ [buttonLoadingIconStyles.buttonLoading()]: isCentered })}>\n      <LoadingIcon size={size} />\n    </div>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonLoadingIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonLoadingIcon.js",
+  "module": "ClickableButtonLoadingIcon",
+  "types": "../ClickableButtonLoadingIcon.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonLoadingIcon.d.ts

@@ -0,0 +1,6 @@
+import { ClickableProps } from './Clickable';
+interface ClickableButtonLoadingIconProps extends Pick<ClickableProps, 'size'> {
+    isCentered?: boolean;
+}
+export declare const ClickableButtonLoadingIcon: ({ size, isCentered }: ClickableButtonLoadingIconProps) => JSX.Element;
+export {};

package/components/Clickable/ClickableButtonLoadingIcon.styles/ClickableButtonLoadingIcon.styles.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonLoadingIconStyles = memoizeStyle({
+  buttonLoading: function buttonLoading() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "])));
+  }
+});

package/components/Clickable/ClickableButtonLoadingIcon.styles/ClickableButtonLoadingIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonLoadingIcon.styles.ts"],"names":["css","memoizeStyle","buttonLoadingIconStyles","buttonLoading"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,uBAAuB,GAAGD,YAAY,CAAC;AAClDE,EAAAA,aADkD,2BAClC;AACd,WAAOH,GAAP;;;;;;;;;;;;AAYD,GAdiD,EAAD,CAA5C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonLoadingIconStyles = memoizeStyle({\n  buttonLoading() {\n    return css`\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonLoadingIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonLoadingIcon.styles.js",
+  "module": "ClickableButtonLoadingIcon.styles",
+  "types": "../ClickableButtonLoadingIcon.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonLoadingIcon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const buttonLoadingIconStyles: {
+    buttonLoading(): string;
+};

package/components/Clickable/ClickableButtonOutline/ClickableButtonOutline.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { buttonOutlineStyles } from "../ClickableButtonOutline.styles";
+export var ClickableButtonOutline = function ClickableButtonOutline(_ref) {
+  var _cx;
+
+  var isWarning = _ref.isWarning,
+      isError = _ref.isError,
+      isDisabled = _ref.isDisabled,
+      isLoading = _ref.isLoading,
+      isFocused = _ref.isFocused;
+  var theme = useContext(ThemeContext);
+
+  if (isFocused || isDisabled || isLoading) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx((_cx = {}, _cx[buttonOutlineStyles.buttonOutline()] = true, _cx[buttonOutlineStyles.buttonOutlineWarning(theme)] = isWarning, _cx[buttonOutlineStyles.buttonOutlineError(theme)] = isError, _cx))
+  });
+};

package/components/Clickable/ClickableButtonOutline/ClickableButtonOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonOutline.tsx"],"names":["React","useContext","ThemeContext","cx","buttonOutlineStyles","ClickableButtonOutline","isWarning","isError","isDisabled","isLoading","isFocused","theme","buttonOutline","buttonOutlineWarning","buttonOutlineError"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,mBAAT,QAAoC,iCAApC;;;;;;;AAOA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB;;;;;;AAMH,aALjCC,SAKiC,QALjCA,SAKiC,CAJjCC,OAIiC,QAJjCA,OAIiC,CAHjCC,UAGiC,QAHjCA,UAGiC,CAFjCC,SAEiC,QAFjCA,SAEiC,CADjCC,SACiC,QADjCA,SACiC;AACjC,MAAMC,KAAK,GAAGV,UAAU,CAACC,YAAD,CAAxB;;AAEA,MAAIQ,SAAS,IAAIF,UAAb,IAA2BC,SAA/B,EAA0C;AACxC,WAAO,IAAP;AACD;;AAED;AACE;AACE,MAAA,SAAS,EAAEN,EAAE;AACVC,MAAAA,mBAAmB,CAACQ,aAApB,EADU,IAC4B,IAD5B;AAEVR,MAAAA,mBAAmB,CAACS,oBAApB,CAAyCF,KAAzC,CAFU,IAEwCL,SAFxC;AAGVF,MAAAA,mBAAmB,CAACU,kBAApB,CAAuCH,KAAvC,CAHU,IAGsCJ,OAHtC,OADf,GADF;;;;AASD,CAtBM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableButtonProps } from './ClickableButton';\nimport { buttonOutlineStyles } from './ClickableButtonOutline.styles';\n\ntype ClickableButtonOutlineProps = Pick<\n  ClickableButtonProps,\n  'isWarning' | 'isError' | 'isDisabled' | 'isLoading' | 'isFocused'\n>;\n\nexport const ClickableButtonOutline = ({\n  isWarning,\n  isError,\n  isDisabled,\n  isLoading,\n  isFocused,\n}: ClickableButtonOutlineProps) => {\n  const theme = useContext(ThemeContext);\n\n  if (isFocused || isDisabled || isLoading) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cx({\n        [buttonOutlineStyles.buttonOutline()]: true,\n        [buttonOutlineStyles.buttonOutlineWarning(theme)]: isWarning,\n        [buttonOutlineStyles.buttonOutlineError(theme)]: isError,\n      })}\n    />\n  );\n};\n"]}

package/components/Clickable/ClickableButtonOutline/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonOutline.js",
+  "module": "ClickableButtonOutline",
+  "types": "../ClickableButtonOutline.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonOutline.d.ts

@@ -0,0 +1,4 @@
+import { ClickableButtonProps } from './ClickableButton';
+declare type ClickableButtonOutlineProps = Pick<ClickableButtonProps, 'isWarning' | 'isError' | 'isDisabled' | 'isLoading' | 'isFocused'>;
+export declare const ClickableButtonOutline: ({ isWarning, isError, isDisabled, isLoading, isFocused, }: ClickableButtonOutlineProps) => JSX.Element | null;
+export {};

package/components/Clickable/ClickableButtonOutline.styles/ClickableButtonOutline.styles.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonOutlineStyles = memoizeStyle({
+  buttonOutline: function buttonOutline() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    "])));
+  },
+  buttonOutlineWarning: function buttonOutlineWarning(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 ", " ", ",\n        inset 0 0 0 ", " ", ";\n    "])), t.btnOutlineWidth, t.btnBorderColorWarning, t.btnInsetWidth, t.btnInsetColor);
+  },
+  buttonOutlineError: function buttonOutlineError(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 ", " ", ", inset 0 0 0 ", " ", ";\n    "])), t.btnOutlineWidth, t.btnBorderColorError, t.btnInsetWidth, t.btnInsetColor);
+  }
+});

package/components/Clickable/ClickableButtonOutline.styles/ClickableButtonOutline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonOutline.styles.ts"],"names":["css","memoizeStyle","buttonOutlineStyles","buttonOutline","buttonOutlineWarning","t","btnOutlineWidth","btnBorderColorWarning","btnInsetWidth","btnInsetColor","buttonOutlineError","btnBorderColorError"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,YAAY,CAAC;AAC9CE,EAAAA,aAD8C,2BAC9B;AACd,WAAOH,GAAP;;;;;;;;AAQD,GAV6C;AAW9CI,EAAAA,oBAX8C,gCAWzBC,CAXyB,EAWf;AAC7B,WAAOL,GAAP;AACsBK,IAAAA,CAAC,CAACC,eADxB,EAC2CD,CAAC,CAACE,qBAD7C;AAEkBF,IAAAA,CAAC,CAACG,aAFpB,EAEqCH,CAAC,CAACI,aAFvC;;AAID,GAhB6C;AAiB9CC,EAAAA,kBAjB8C,8BAiB3BL,CAjB2B,EAiBjB;AAC3B,WAAOL,GAAP;AACsBK,IAAAA,CAAC,CAACC,eADxB,EAC2CD,CAAC,CAACM,mBAD7C,EACiFN,CAAC,CAACG,aADnF,EACoGH,CAAC,CAACI,aADtG;;AAGD,GArB6C,EAAD,CAAxC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonOutlineStyles = memoizeStyle({\n  buttonOutline() {\n    return css`\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    `;\n  },\n  buttonOutlineWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorWarning},\n        inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor};\n    `;\n  },\n  buttonOutlineError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorError}, inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor};\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonOutline.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonOutline.styles.js",
+  "module": "ClickableButtonOutline.styles",
+  "types": "../ClickableButtonOutline.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonOutline.styles.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonOutlineStyles: {
+    buttonOutline(): string;
+    buttonOutlineWarning(t: Theme): string;
+    buttonOutlineError(t: Theme): string;
+};

package/components/Clickable/ClickableButtonWrapper/ClickableButtonWrapper.js

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { buttonWrapperStyles } from "../ClickableButtonWrapper.styles";
+export var ClickableButtonWrapper = function ClickableButtonWrapper(_ref) {
+  var _cx;
+
+  var width = _ref.width,
+      size = _ref.size,
+      children = _ref.children;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: width
+    },
+    className: cx((_cx = {}, _cx[buttonWrapperStyles.buttonWrapper(theme)] = true, _cx[buttonWrapperStyles.buttonWrapperSmall(theme)] = size === 'small' || size === undefined, _cx[buttonWrapperStyles.buttonWrapperMedium(theme)] = size === 'medium', _cx[buttonWrapperStyles.buttonWrapperLarge(theme)] = size === 'large', _cx))
+  }, children);
+};

package/components/Clickable/ClickableButtonWrapper/ClickableButtonWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonWrapper.tsx"],"names":["React","useContext","ThemeContext","cx","buttonWrapperStyles","ClickableButtonWrapper","width","size","children","theme","buttonWrapper","buttonWrapperSmall","undefined","buttonWrapperMedium","buttonWrapperLarge"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,mBAAT,QAAoC,iCAApC;;;;AAIA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,OAA4D,aAAzDC,KAAyD,QAAzDA,KAAyD,CAAlDC,IAAkD,QAAlDA,IAAkD,CAA5CC,QAA4C,QAA5CA,QAA4C;AAChG,MAAMC,KAAK,GAAGR,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,KAAK,EAAE,EAAEI,KAAK,EAALA,KAAF,EADT;AAEE,MAAA,SAAS,EAAEH,EAAE;AACVC,MAAAA,mBAAmB,CAACM,aAApB,CAAkCD,KAAlC,CADU,IACiC,IADjC;AAEVL,MAAAA,mBAAmB,CAACO,kBAApB,CAAuCF,KAAvC,CAFU,IAEsCF,IAAI,KAAK,OAAT,IAAoBA,IAAI,KAAKK,SAFnE;AAGVR,MAAAA,mBAAmB,CAACS,mBAApB,CAAwCJ,KAAxC,CAHU,IAGuCF,IAAI,KAAK,QAHhD;AAIVH,MAAAA,mBAAmB,CAACU,kBAApB,CAAuCL,KAAvC,CAJU,IAIsCF,IAAI,KAAK,OAJ/C,OAFf;;;AASGC,IAAAA,QATH,CADF;;;AAaD,CAhBM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\nimport { buttonWrapperStyles } from './ClickableButtonWrapper.styles';\n\nexport type ClickableButtonWrapperProps = Pick<ClickableProps, 'width' | 'size' | 'children'>;\n\nexport const ClickableButtonWrapper = ({ width, size, children }: ClickableButtonWrapperProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <span\n      style={{ width }}\n      className={cx({\n        [buttonWrapperStyles.buttonWrapper(theme)]: true,\n        [buttonWrapperStyles.buttonWrapperSmall(theme)]: size === 'small' || size === undefined,\n        [buttonWrapperStyles.buttonWrapperMedium(theme)]: size === 'medium',\n        [buttonWrapperStyles.buttonWrapperLarge(theme)]: size === 'large',\n      })}\n    >\n      {children}\n    </span>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonWrapper/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonWrapper.js",
+  "module": "ClickableButtonWrapper",
+  "types": "../ClickableButtonWrapper.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonWrapper.d.ts

@@ -0,0 +1,3 @@
+import { ClickableProps } from './Clickable';
+export declare type ClickableButtonWrapperProps = Pick<ClickableProps, 'width' | 'size' | 'children'>;
+export declare const ClickableButtonWrapper: ({ width, size, children }: ClickableButtonWrapperProps) => JSX.Element;

package/components/Clickable/ClickableButtonWrapper.styles/ClickableButtonWrapper.styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonWrapperStyles = memoizeStyle({
+  buttonWrapper: function buttonWrapper(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ", ";\n    "])), t.btnBorderWidth);
+  },
+  buttonWrapperSmall: function buttonWrapperSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.btnHeightSmall);
+  },
+  buttonWrapperMedium: function buttonWrapperMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.btnHeightMedium);
+  },
+  buttonWrapperLarge: function buttonWrapperLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.btnHeightLarge);
+  }
+});

package/components/Clickable/ClickableButtonWrapper.styles/ClickableButtonWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonWrapper.styles.ts"],"names":["css","memoizeStyle","buttonWrapperStyles","buttonWrapper","t","btnBorderWidth","buttonWrapperSmall","btnHeightSmall","buttonWrapperMedium","btnHeightMedium","buttonWrapperLarge","btnHeightLarge"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,mBAAmB,GAAGD,YAAY,CAAC;AAC9CE,EAAAA,aAD8C,yBAChCC,CADgC,EACtB;AACtB,WAAOJ,GAAP;;;;AAIaI,IAAAA,CAAC,CAACC,cAJf;;AAMD,GAR6C;AAS9CC,EAAAA,kBAT8C,8BAS3BF,CAT2B,EASjB;AAC3B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACG,cADd;;AAGD,GAb6C;AAc9CC,EAAAA,mBAd8C,+BAc1BJ,CAd0B,EAchB;AAC5B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACK,eADd;;AAGD,GAlB6C;AAmB9CC,EAAAA,kBAnB8C,8BAmB3BN,CAnB2B,EAmBjB;AAC3B,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACO,cADd;;AAGD,GAvB6C,EAAD,CAAxC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonWrapperStyles = memoizeStyle({\n  buttonWrapper(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ${t.btnBorderWidth};\n    `;\n  },\n  buttonWrapperSmall(t: Theme) {\n    return css`\n      height: ${t.btnHeightSmall};\n    `;\n  },\n  buttonWrapperMedium(t: Theme) {\n    return css`\n      height: ${t.btnHeightMedium};\n    `;\n  },\n  buttonWrapperLarge(t: Theme) {\n    return css`\n      height: ${t.btnHeightLarge};\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonWrapper.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonWrapper.styles.js",
+  "module": "ClickableButtonWrapper.styles",
+  "types": "../ClickableButtonWrapper.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonWrapper.styles.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonWrapperStyles: {
+    buttonWrapper(t: Theme): string;
+    buttonWrapperSmall(t: Theme): string;
+    buttonWrapperMedium(t: Theme): string;
+    buttonWrapperLarge(t: Theme): string;
+};

package/components/Clickable/ClickableLink/ClickableLink.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ClickableLinkChild } from "../ClickableLinkChild";
+import { ClickableLinkIcon } from "../ClickableLinkIcon";
+export var ClickableLink = function ClickableLink(_ref) {
+  var leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      isLoading = _ref.isLoading,
+      isFocused = _ref.isFocused,
+      isError = _ref.isError,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon && /*#__PURE__*/React.createElement(ClickableLinkIcon, {
+    icon: leftIcon,
+    isLoading: isLoading,
+    position: "left"
+  }), /*#__PURE__*/React.createElement(ClickableLinkChild, {
+    isFocused: isFocused,
+    isError: isError
+  }, children), rightIcon && /*#__PURE__*/React.createElement(ClickableLinkIcon, {
+    icon: rightIcon,
+    isLoading: isLoading,
+    position: "right",
+    hasBothIcons: !!leftIcon && !!rightIcon
+  }));
+};

package/components/Clickable/ClickableLink/ClickableLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLink.tsx"],"names":["React","ClickableLinkChild","ClickableLinkIcon","ClickableLink","leftIcon","rightIcon","isLoading","isFocused","isError","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,kBAAT,QAA4D,sBAA5D;AACA,SAASC,iBAAT,QAAkC,qBAAlC;;;;;;AAMA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAA0F,KAAvFC,QAAuF,QAAvFA,QAAuF,CAA7EC,SAA6E,QAA7EA,SAA6E,CAAlEC,SAAkE,QAAlEA,SAAkE,CAAvDC,SAAuD,QAAvDA,SAAuD,CAA5CC,OAA4C,QAA5CA,OAA4C,CAAnCC,QAAmC,QAAnCA,QAAmC;AACrH;AACE;AACGL,IAAAA,QAAQ,iBAAI,oBAAC,iBAAD,IAAmB,IAAI,EAAEA,QAAzB,EAAmC,SAAS,EAAEE,SAA9C,EAAyD,QAAQ,EAAC,MAAlE,GADf;AAEE,wBAAC,kBAAD,IAAoB,SAAS,EAAEC,SAA/B,EAA0C,OAAO,EAAEC,OAAnD;AACGC,IAAAA,QADH,CAFF;;AAKGJ,IAAAA,SAAS;AACR,wBAAC,iBAAD;AACE,MAAA,IAAI,EAAEA,SADR;AAEE,MAAA,SAAS,EAAEC,SAFb;AAGE,MAAA,QAAQ,EAAC,OAHX;AAIE,MAAA,YAAY,EAAE,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,SAJhC,GANJ,CADF;;;;;AAgBD,CAjBM","sourcesContent":["import React from 'react';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableLinkChild, ClickableLinkChildProps } from './ClickableLinkChild';\nimport { ClickableLinkIcon } from './ClickableLinkIcon';\n\nexport interface ClickableLinkProps\n  extends ClickableLinkChildProps,\n    Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isLoading'> {}\n\nexport const ClickableLink = ({ leftIcon, rightIcon, isLoading, isFocused, isError, children }: ClickableLinkProps) => {\n  return (\n    <>\n      {leftIcon && <ClickableLinkIcon icon={leftIcon} isLoading={isLoading} position=\"left\" />}\n      <ClickableLinkChild isFocused={isFocused} isError={isError}>\n        {children}\n      </ClickableLinkChild>\n      {rightIcon && (\n        <ClickableLinkIcon\n          icon={rightIcon}\n          isLoading={isLoading}\n          position=\"right\"\n          hasBothIcons={!!leftIcon && !!rightIcon}\n        />\n      )}\n    </>\n  );\n};\n"]}

package/components/Clickable/ClickableLink/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableLink.js",
+  "module": "ClickableLink",
+  "types": "../ClickableLink.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableLink.d.ts

@@ -0,0 +1,5 @@
+import { ClickableProps } from './Clickable';
+import { ClickableLinkChildProps } from './ClickableLinkChild';
+export interface ClickableLinkProps extends ClickableLinkChildProps, Pick<ClickableProps, 'leftIcon' | 'rightIcon' | 'isLoading'> {
+}
+export declare const ClickableLink: ({ leftIcon, rightIcon, isLoading, isFocused, isError, children }: ClickableLinkProps) => JSX.Element;

package/components/Clickable/ClickableLink.styles/ClickableLink.styles.js

@@ -0,0 +1,52 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import { css, cx, memoizeStyle } from "../../../lib/theming/Emotion";
+import { isDarkTheme } from "../../../lib/theming/ThemeHelpers";
+import { linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from "../../Link/Link.mixins";
+import { clickableGlobalClasses } from "../Clickable.styles";
+export var linkStyles = memoizeStyle({
+  linkRoot: function linkRoot() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .", " {\n        border-bottom-color: currentColor !important;\n      }\n      border-bottom-color: currentColor;\n    "])), clickableGlobalClasses.text);
+  },
+  linkDefault: function linkDefault(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkSuccess: function linkSuccess(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkDanger: function linkDanger(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkGrayed: function linkGrayed(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkDisabled: function linkDisabled(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
+  },
+  linkDisabledDark: function linkDisabledDark(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      .", " {\n        ", "\n      }\n    "])), clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocus: function linkLineFocus(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      .", " {\n        ", "\n      }\n    "])), t.linkHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocusSuccess: function linkLineFocusSuccess(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkSuccessHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocusDanger: function linkLineFocusDanger(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkDangerHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  linkLineFocusGrayed: function linkLineFocusGrayed(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkGrayedHoverColor, clickableGlobalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  }
+});
+export var getLinkStyles = function getLinkStyles(_ref) {
+  var _cx;
+
+  var use = _ref.use,
+      isFocused = _ref.isFocused,
+      isNotInteractive = _ref.isNotInteractive,
+      theme = _ref.theme;
+  return cx((_cx = {}, _cx[linkStyles.linkRoot()] = true, _cx[linkStyles.linkDefault(theme)] = use === 'default' || use === undefined, _cx[linkStyles.linkSuccess(theme)] = use === 'success', _cx[linkStyles.linkDanger(theme)] = use === 'danger', _cx[linkStyles.linkGrayed(theme)] = use === 'grayed', _cx[linkStyles.linkLineFocus(theme)] = use === 'default' && isFocused, _cx[linkStyles.linkLineFocusSuccess(theme)] = use === 'success' && isFocused, _cx[linkStyles.linkLineFocusDanger(theme)] = use === 'danger' && isFocused, _cx[linkStyles.linkLineFocusGrayed(theme)] = isFocused && use === 'grayed', _cx[linkStyles.linkDisabled(theme)] = isNotInteractive, _cx[linkStyles.linkDisabledDark(theme)] = isNotInteractive && isDarkTheme(theme), _cx));
+};

package/components/Clickable/ClickableLink.styles/ClickableLink.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableLink.styles.ts"],"names":["css","cx","memoizeStyle","isDarkTheme","linkDisabledMixin","linkUseColorsMixin","linkUseLineHovered","clickableGlobalClasses","linkStyles","linkRoot","text","linkDefault","t","linkColor","linkHoverColor","linkActiveColor","linkLineHoverBorderBottomStyle","linkSuccess","linkSuccessColor","linkSuccessHoverColor","linkSuccessActiveColor","linkDanger","linkDangerColor","linkDangerHoverColor","linkDangerActiveColor","linkGrayed","linkGrayedColor","linkGrayedHoverColor","linkGrayedActiveColor","linkDisabled","linkDisabledColor","linkDisabledDark","linkLineFocus","linkLineFocusSuccess","linkLineFocusDanger","linkLineFocusGrayed","getLinkStyles","use","isFocused","isNotInteractive","theme","undefined"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, cx, memoizeStyle } from '../../lib/theming/Emotion';\nimport { isDarkTheme } from '../../lib/theming/ThemeHelpers';\nimport { linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from '../Link/Link.mixins';\n\nimport { GetStylesBase, clickableGlobalClasses } from './Clickable.styles';\n\nexport const linkStyles = memoizeStyle({\n  linkRoot() {\n    return css`\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .${clickableGlobalClasses.text} {\n        border-bottom-color: currentColor !important;\n      }\n      border-bottom-color: currentColor;\n    `;\n  },\n\n  linkDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n  linkSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n  linkDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n  linkGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};\n      .${clickableGlobalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  linkDisabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor} !important; // override root color\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n  linkDisabledDark(t: Theme) {\n    return css`\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  linkLineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n  linkLineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n  linkLineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n  linkLineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\n      .${clickableGlobalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n});\n\ninterface GetLinkStylesArgs extends GetStylesBase {\n  isFocused: boolean;\n  isNotInteractive: boolean;\n}\n\nexport const getLinkStyles = ({ use, isFocused, isNotInteractive, theme }: GetLinkStylesArgs) => {\n  return cx({\n    [linkStyles.linkRoot()]: true,\n    [linkStyles.linkDefault(theme)]: use === 'default' || use === undefined,\n    [linkStyles.linkSuccess(theme)]: use === 'success',\n    [linkStyles.linkDanger(theme)]: use === 'danger',\n    [linkStyles.linkGrayed(theme)]: use === 'grayed',\n    [linkStyles.linkLineFocus(theme)]: use === 'default' && isFocused,\n    [linkStyles.linkLineFocusSuccess(theme)]: use === 'success' && isFocused,\n    [linkStyles.linkLineFocusDanger(theme)]: use === 'danger' && isFocused,\n    [linkStyles.linkLineFocusGrayed(theme)]: isFocused && use === 'grayed',\n    [linkStyles.linkDisabled(theme)]: isNotInteractive,\n    [linkStyles.linkDisabledDark(theme)]: isNotInteractive && isDarkTheme(theme),\n  });\n};\n"]}