@veeqo/ui 14.0.5 → 14.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/components/Action/Action.cjs +67 -0
  2. package/dist/components/Action/Action.cjs.map +1 -0
  3. package/dist/components/Action/Action.d.ts +67 -0
  4. package/dist/components/Action/Action.js +61 -0
  5. package/dist/components/Action/Action.js.map +1 -0
  6. package/dist/components/Action/index.d.ts +2 -0
  7. package/dist/components/Action/styles/base.module.scss.cjs +9 -0
  8. package/dist/components/Action/styles/base.module.scss.cjs.map +1 -0
  9. package/dist/components/Action/styles/base.module.scss.js +7 -0
  10. package/dist/components/Action/styles/base.module.scss.js.map +1 -0
  11. package/dist/components/Action/styles/button.module.scss.cjs +9 -0
  12. package/dist/components/Action/styles/button.module.scss.cjs.map +1 -0
  13. package/dist/components/Action/styles/button.module.scss.js +7 -0
  14. package/dist/components/Action/styles/button.module.scss.js.map +1 -0
  15. package/dist/components/Action/styles/link.module.scss.cjs +9 -0
  16. package/dist/components/Action/styles/link.module.scss.cjs.map +1 -0
  17. package/dist/components/Action/styles/link.module.scss.js +7 -0
  18. package/dist/components/Action/styles/link.module.scss.js.map +1 -0
  19. package/dist/components/Action/types.d.ts +26 -0
  20. package/dist/components/Action/utils.cjs +42 -0
  21. package/dist/components/Action/utils.cjs.map +1 -0
  22. package/dist/components/Action/utils.d.ts +13 -0
  23. package/dist/components/Action/utils.js +39 -0
  24. package/dist/components/Action/utils.js.map +1 -0
  25. package/dist/components/Anchor/Anchor.cjs +3 -1
  26. package/dist/components/Anchor/Anchor.cjs.map +1 -1
  27. package/dist/components/Anchor/Anchor.d.ts +2 -0
  28. package/dist/components/Anchor/Anchor.js +3 -1
  29. package/dist/components/Anchor/Anchor.js.map +1 -1
  30. package/dist/components/Button/Button.cjs +4 -0
  31. package/dist/components/Button/Button.cjs.map +1 -1
  32. package/dist/components/Button/Button.d.ts +12 -0
  33. package/dist/components/Button/Button.js +4 -1
  34. package/dist/components/Button/Button.js.map +1 -1
  35. package/dist/components/DataTable/utils/alignmentToFlex.d.ts +1 -1
  36. package/dist/components/FeatureBanner/FeatureBanner.d.ts +1 -1
  37. package/dist/components/Flex/FlexCol/FlexCol.d.ts +2 -2
  38. package/dist/components/Flex/FlexRow/FlexRow.d.ts +2 -2
  39. package/dist/components/Pagination/styled.d.ts +2 -2
  40. package/dist/components/index.d.ts +3 -2
  41. package/dist/index.cjs +4 -0
  42. package/dist/index.cjs.map +1 -1
  43. package/dist/index.js +2 -0
  44. package/dist/index.js.map +1 -1
  45. package/dist/utils/getContextAwareLink.cjs +43 -0
  46. package/dist/utils/getContextAwareLink.cjs.map +1 -0
  47. package/dist/utils/getContextAwareLink.d.ts +27 -0
  48. package/dist/utils/getContextAwareLink.js +41 -0
  49. package/dist/utils/getContextAwareLink.js.map +1 -0
  50. package/dist/utils/index.d.ts +1 -0
  51. package/package.json +1 -1
@@ -0,0 +1,67 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var getContextAwareLink = require('../../utils/getContextAwareLink.cjs');
5
+ var Loader = require('../Loader/Loader.cjs');
6
+ var LaunchIcon = require('../../icons/design-system/components/LaunchIcon.cjs');
7
+ var utils = require('./utils.cjs');
8
+ var button_module = require('./styles/button.module.scss.cjs');
9
+ var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
10
+
11
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
+
13
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
+
15
+ /**
16
+ * Action component for rendering buttons or links with various styles and behaviors.
17
+ */
18
+ const Action = React.forwardRef(({ appearance, as, href, target, rel, allowedHostnames, className, variant, disabled, compact, iconSlot, children, hideExternalLinkIcon, loading, type = 'button', ...otherProps }, ref) => {
19
+ const isSemanticLink = !!href;
20
+ const defaultAppearance = isSemanticLink ? 'link' : 'button';
21
+ const visualAppearance = appearance || defaultAppearance;
22
+ const classNames = React.useMemo(() => utils.getAppearanceClasses(visualAppearance, {
23
+ className,
24
+ variant,
25
+ disabled,
26
+ compact,
27
+ iconSlot,
28
+ children,
29
+ }), [visualAppearance, className, variant, disabled, compact, iconSlot, children]);
30
+ const { linkProps, showExternalIcon } = getContextAwareLink.getContextAwareLink({
31
+ href,
32
+ target,
33
+ rel,
34
+ allowedHostnames,
35
+ });
36
+ const shouldShowExternalIcon = showExternalIcon && !hideExternalLinkIcon;
37
+ // This assignment is needed to allow TypeScript to infer the correct type for `as`
38
+ // and to ensure we can pass the correct props to the component without a type error.
39
+ const Component = as || (isSemanticLink ? 'a' : 'button');
40
+ // If a custom component is specified via `as`, render that component
41
+ if (as) {
42
+ return (React__default.default.createElement(Component, { ...otherProps, ref: ref, className: classNames, disabled: disabled, loading: loading, type: type, ...linkProps },
43
+ iconSlot,
44
+ children,
45
+ shouldShowExternalIcon && React__default.default.createElement(LaunchIcon.ReactComponent, null)));
46
+ }
47
+ // Render as an Anchor if type is a navigate action
48
+ if (isSemanticLink) {
49
+ return (React__default.default.createElement("a", { ...otherProps, ref: ref, className: classNames, ...linkProps },
50
+ iconSlot,
51
+ children,
52
+ shouldShowExternalIcon && React__default.default.createElement(LaunchIcon.ReactComponent, null)));
53
+ }
54
+ // Otherwise, render as a Button
55
+ return (React__default.default.createElement("button", { ...otherProps, ref: ref,
56
+ // eslint-disable-next-line react/button-has-type
57
+ type: type || 'button', className: classNames, disabled: disabled, "aria-busy": loading },
58
+ React__default.default.createElement(FlexRow.FlexRow, { gap: "sm", flexWrap: "nowrap", className: loading ? button_module.hideContent : undefined },
59
+ iconSlot,
60
+ children,
61
+ shouldShowExternalIcon && React__default.default.createElement(LaunchIcon.ReactComponent, null)),
62
+ loading && (React__default.default.createElement("div", { className: button_module.loadingWrapper, "aria-label": "Loading" },
63
+ React__default.default.createElement(Loader.Loader, null)))));
64
+ });
65
+
66
+ exports.Action = Action;
67
+ //# sourceMappingURL=Action.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Action.cjs","sources":["../../../src/components/Action/Action.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { getContextAwareLink } from '../../utils/getContextAwareLink';\nimport { Loader } from '../Loader';\nimport { LaunchIcon } from '../../icons';\nimport { getAppearanceClasses } from './utils';\nimport { ActionProps } from './types';\n\nimport buttonStyles from './styles/button.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\n\n/**\n * Action component for rendering buttons or links with various styles and behaviors.\n */\nexport const Action = forwardRef(\n <C extends React.ElementType>(\n {\n appearance,\n as,\n href,\n target,\n rel,\n allowedHostnames,\n className,\n variant,\n disabled,\n compact,\n iconSlot,\n children,\n hideExternalLinkIcon,\n loading,\n type = 'button',\n ...otherProps\n }: ActionProps<C>,\n ref: React.Ref<HTMLElement>,\n ) => {\n const isSemanticLink = !!href;\n const defaultAppearance = isSemanticLink ? 'link' : 'button';\n const visualAppearance = appearance || defaultAppearance;\n\n const classNames = useMemo(\n () =>\n getAppearanceClasses(visualAppearance, {\n className,\n variant,\n disabled,\n compact,\n iconSlot,\n children,\n }),\n [visualAppearance, className, variant, disabled, compact, iconSlot, children],\n );\n\n const { linkProps, showExternalIcon } = getContextAwareLink({\n href,\n target,\n rel,\n allowedHostnames,\n });\n\n const shouldShowExternalIcon = showExternalIcon && !hideExternalLinkIcon;\n\n // This assignment is needed to allow TypeScript to infer the correct type for `as`\n // and to ensure we can pass the correct props to the component without a type error.\n const Component = as || (isSemanticLink ? 'a' : 'button');\n\n // If a custom component is specified via `as`, render that component\n if (as) {\n return (\n <Component\n {...otherProps}\n ref={ref}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n {...linkProps}\n >\n {iconSlot}\n {children}\n {shouldShowExternalIcon && <LaunchIcon />}\n </Component>\n );\n }\n\n // Render as an Anchor if type is a navigate action\n if (isSemanticLink) {\n return (\n <a\n {...otherProps}\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={classNames}\n {...linkProps}\n >\n {iconSlot}\n {children}\n {shouldShowExternalIcon && <LaunchIcon />}\n </a>\n );\n }\n\n // Otherwise, render as a Button\n return (\n <button\n {...otherProps}\n ref={ref as React.Ref<HTMLButtonElement>}\n // eslint-disable-next-line react/button-has-type\n type={type || 'button'}\n className={classNames}\n disabled={disabled}\n aria-busy={loading}\n >\n <FlexRow\n gap=\"sm\"\n flexWrap=\"nowrap\"\n className={loading ? buttonStyles.hideContent : undefined}\n >\n {iconSlot}\n {children}\n {shouldShowExternalIcon && <LaunchIcon />}\n </FlexRow>\n {loading && (\n <div className={buttonStyles.loadingWrapper} aria-label=\"Loading\">\n <Loader />\n </div>\n )}\n </button>\n );\n },\n);\n"],"names":["forwardRef","useMemo","getAppearanceClasses","getContextAwareLink","React","LaunchIcon","FlexRow","buttonStyles","Loader"],"mappings":";;;;;;;;;;;;;;AAUA;;AAEG;MACU,MAAM,GAAGA,gBAAU,CAC9B,CACE,EACE,UAAU,EACV,EAAE,EACF,IAAI,EACJ,MAAM,EACN,GAAG,EACH,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACpB,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACE,EACjB,GAA2B,KACzB;AACF,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI;IAC7B,MAAM,iBAAiB,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC5D,IAAA,MAAM,gBAAgB,GAAG,UAAU,IAAI,iBAAiB;IAExD,MAAM,UAAU,GAAGC,aAAO,CACxB,MACEC,0BAAoB,CAAC,gBAAgB,EAAE;QACrC,SAAS;QACT,OAAO;QACP,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC,EACJ,CAAC,gBAAgB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC9E;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAGC,uCAAmB,CAAC;QAC1D,IAAI;QACJ,MAAM;QACN,GAAG;QACH,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,sBAAsB,GAAG,gBAAgB,IAAI,CAAC,oBAAoB;;;AAIxE,IAAA,MAAM,SAAS,GAAG,EAAE,KAAK,cAAc,GAAG,GAAG,GAAG,QAAQ,CAAC;;AAGzD,IAAA,IAAI,EAAE,EAAE;QACN,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACJ,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EAAA,GACN,SAAS,EAAA;YAEZ,QAAQ;YACR,QAAQ;AACR,YAAA,sBAAsB,IAAIA,sBAAA,CAAA,aAAA,CAACC,yBAAU,EAAA,IAAA,CAAG,CAC/B;AAEf,IAAA;;AAGD,IAAA,IAAI,cAAc,EAAE;AAClB,QAAA,QACED,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,UAAU,EAAA,GACjB,SAAS,EAAA;YAEZ,QAAQ;YACR,QAAQ;AACR,YAAA,sBAAsB,IAAIA,sBAAA,CAAA,aAAA,CAACC,yBAAU,EAAA,IAAA,CAAG,CACvC;AAEP,IAAA;;AAGD,IAAA,QACED,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAmC;;AAExC,QAAA,IAAI,EAAE,IAAI,IAAI,QAAQ,EACtB,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,eACP,OAAO,EAAA;QAElBA,sBAAA,CAAA,aAAA,CAACE,eAAO,IACN,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,OAAO,GAAGC,aAAY,CAAC,WAAW,GAAG,SAAS,EAAA;YAExD,QAAQ;YACR,QAAQ;AACR,YAAA,sBAAsB,IAAIH,sBAAA,CAAA,aAAA,CAACC,yBAAU,EAAA,IAAA,CAAG,CACjC;QACT,OAAO,KACND,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEG,aAAY,CAAC,cAAc,EAAA,YAAA,EAAa,SAAS,EAAA;AAC/D,YAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,CAAG,CACN,CACP,CACM;AAEb,CAAC;;;;"}
@@ -0,0 +1,67 @@
1
+ import React from 'react';
2
+ /**
3
+ * Action component for rendering buttons or links with various styles and behaviors.
4
+ */
5
+ export declare const Action: React.ForwardRefExoticComponent<(Omit<{
6
+ appearance?: import("./types").ActionAppearance | undefined;
7
+ as?: React.ElementType<any> | undefined;
8
+ children?: React.ReactNode;
9
+ className?: string | undefined;
10
+ /**
11
+ * Action component for rendering buttons or links with various styles and behaviors.
12
+ */
13
+ compact?: boolean | undefined;
14
+ disabled?: boolean | undefined;
15
+ iconSlot?: React.ReactNode;
16
+ loading?: boolean | undefined;
17
+ type?: "button" | "submit" | "reset" | undefined;
18
+ variant?: import("./types").ActionVariant | undefined;
19
+ } & Omit<Omit<any, "ref">, "slot" | "style" | "title" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | keyof {
20
+ appearance?: import("./types").ActionAppearance | undefined;
21
+ as?: C | undefined;
22
+ children?: React.ReactNode;
23
+ className?: string | undefined;
24
+ /**
25
+ * Action component for rendering buttons or links with various styles and behaviors.
26
+ */
27
+ compact?: boolean | undefined;
28
+ disabled?: boolean | undefined;
29
+ iconSlot?: React.ReactNode;
30
+ loading?: boolean | undefined;
31
+ type?: "button" | "submit" | "reset" | undefined;
32
+ variant?: import("./types").ActionVariant | undefined;
33
+ }> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
34
+ href: string;
35
+ allowedHostnames?: string[] | undefined;
36
+ hideExternalLinkIcon?: boolean | undefined;
37
+ }, "ref"> | Omit<{
38
+ appearance?: import("./types").ActionAppearance | undefined;
39
+ as?: React.ElementType<any> | undefined;
40
+ children?: React.ReactNode;
41
+ className?: string | undefined;
42
+ /**
43
+ * Action component for rendering buttons or links with various styles and behaviors.
44
+ */
45
+ compact?: boolean | undefined;
46
+ disabled?: boolean | undefined;
47
+ iconSlot?: React.ReactNode;
48
+ loading?: boolean | undefined;
49
+ type?: "button" | "submit" | "reset" | undefined;
50
+ variant?: import("./types").ActionVariant | undefined;
51
+ } & Omit<Omit<any, "ref">, "slot" | "style" | "title" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "href" | keyof {
52
+ appearance?: import("./types").ActionAppearance | undefined;
53
+ as?: C | undefined;
54
+ children?: React.ReactNode;
55
+ className?: string | undefined;
56
+ /**
57
+ * Action component for rendering buttons or links with various styles and behaviors.
58
+ */
59
+ compact?: boolean | undefined;
60
+ disabled?: boolean | undefined;
61
+ iconSlot?: React.ReactNode;
62
+ loading?: boolean | undefined;
63
+ type?: "button" | "submit" | "reset" | undefined;
64
+ variant?: import("./types").ActionVariant | undefined;
65
+ }> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
66
+ href?: undefined;
67
+ }, "ref">) & React.RefAttributes<HTMLElement>>;
@@ -0,0 +1,61 @@
1
+ import React__default, { forwardRef, useMemo } from 'react';
2
+ import { getContextAwareLink } from '../../utils/getContextAwareLink.js';
3
+ import { Loader } from '../Loader/Loader.js';
4
+ import { ReactComponent as LaunchIcon } from '../../icons/design-system/components/LaunchIcon.js';
5
+ import { getAppearanceClasses } from './utils.js';
6
+ import buttonStyles from './styles/button.module.scss.js';
7
+ import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
8
+
9
+ /**
10
+ * Action component for rendering buttons or links with various styles and behaviors.
11
+ */
12
+ const Action = forwardRef(({ appearance, as, href, target, rel, allowedHostnames, className, variant, disabled, compact, iconSlot, children, hideExternalLinkIcon, loading, type = 'button', ...otherProps }, ref) => {
13
+ const isSemanticLink = !!href;
14
+ const defaultAppearance = isSemanticLink ? 'link' : 'button';
15
+ const visualAppearance = appearance || defaultAppearance;
16
+ const classNames = useMemo(() => getAppearanceClasses(visualAppearance, {
17
+ className,
18
+ variant,
19
+ disabled,
20
+ compact,
21
+ iconSlot,
22
+ children,
23
+ }), [visualAppearance, className, variant, disabled, compact, iconSlot, children]);
24
+ const { linkProps, showExternalIcon } = getContextAwareLink({
25
+ href,
26
+ target,
27
+ rel,
28
+ allowedHostnames,
29
+ });
30
+ const shouldShowExternalIcon = showExternalIcon && !hideExternalLinkIcon;
31
+ // This assignment is needed to allow TypeScript to infer the correct type for `as`
32
+ // and to ensure we can pass the correct props to the component without a type error.
33
+ const Component = as || (isSemanticLink ? 'a' : 'button');
34
+ // If a custom component is specified via `as`, render that component
35
+ if (as) {
36
+ return (React__default.createElement(Component, { ...otherProps, ref: ref, className: classNames, disabled: disabled, loading: loading, type: type, ...linkProps },
37
+ iconSlot,
38
+ children,
39
+ shouldShowExternalIcon && React__default.createElement(LaunchIcon, null)));
40
+ }
41
+ // Render as an Anchor if type is a navigate action
42
+ if (isSemanticLink) {
43
+ return (React__default.createElement("a", { ...otherProps, ref: ref, className: classNames, ...linkProps },
44
+ iconSlot,
45
+ children,
46
+ shouldShowExternalIcon && React__default.createElement(LaunchIcon, null)));
47
+ }
48
+ // Otherwise, render as a Button
49
+ return (React__default.createElement("button", { ...otherProps, ref: ref,
50
+ // eslint-disable-next-line react/button-has-type
51
+ type: type || 'button', className: classNames, disabled: disabled, "aria-busy": loading },
52
+ React__default.createElement(FlexRow, { gap: "sm", flexWrap: "nowrap", className: loading ? buttonStyles.hideContent : undefined },
53
+ iconSlot,
54
+ children,
55
+ shouldShowExternalIcon && React__default.createElement(LaunchIcon, null)),
56
+ loading && (React__default.createElement("div", { className: buttonStyles.loadingWrapper, "aria-label": "Loading" },
57
+ React__default.createElement(Loader, null)))));
58
+ });
59
+
60
+ export { Action };
61
+ //# sourceMappingURL=Action.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Action.js","sources":["../../../src/components/Action/Action.tsx"],"sourcesContent":["import React, { useMemo, forwardRef } from 'react';\nimport { getContextAwareLink } from '../../utils/getContextAwareLink';\nimport { Loader } from '../Loader';\nimport { LaunchIcon } from '../../icons';\nimport { getAppearanceClasses } from './utils';\nimport { ActionProps } from './types';\n\nimport buttonStyles from './styles/button.module.scss';\nimport { FlexRow } from '../Flex/FlexRow';\n\n/**\n * Action component for rendering buttons or links with various styles and behaviors.\n */\nexport const Action = forwardRef(\n <C extends React.ElementType>(\n {\n appearance,\n as,\n href,\n target,\n rel,\n allowedHostnames,\n className,\n variant,\n disabled,\n compact,\n iconSlot,\n children,\n hideExternalLinkIcon,\n loading,\n type = 'button',\n ...otherProps\n }: ActionProps<C>,\n ref: React.Ref<HTMLElement>,\n ) => {\n const isSemanticLink = !!href;\n const defaultAppearance = isSemanticLink ? 'link' : 'button';\n const visualAppearance = appearance || defaultAppearance;\n\n const classNames = useMemo(\n () =>\n getAppearanceClasses(visualAppearance, {\n className,\n variant,\n disabled,\n compact,\n iconSlot,\n children,\n }),\n [visualAppearance, className, variant, disabled, compact, iconSlot, children],\n );\n\n const { linkProps, showExternalIcon } = getContextAwareLink({\n href,\n target,\n rel,\n allowedHostnames,\n });\n\n const shouldShowExternalIcon = showExternalIcon && !hideExternalLinkIcon;\n\n // This assignment is needed to allow TypeScript to infer the correct type for `as`\n // and to ensure we can pass the correct props to the component without a type error.\n const Component = as || (isSemanticLink ? 'a' : 'button');\n\n // If a custom component is specified via `as`, render that component\n if (as) {\n return (\n <Component\n {...otherProps}\n ref={ref}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n {...linkProps}\n >\n {iconSlot}\n {children}\n {shouldShowExternalIcon && <LaunchIcon />}\n </Component>\n );\n }\n\n // Render as an Anchor if type is a navigate action\n if (isSemanticLink) {\n return (\n <a\n {...otherProps}\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={classNames}\n {...linkProps}\n >\n {iconSlot}\n {children}\n {shouldShowExternalIcon && <LaunchIcon />}\n </a>\n );\n }\n\n // Otherwise, render as a Button\n return (\n <button\n {...otherProps}\n ref={ref as React.Ref<HTMLButtonElement>}\n // eslint-disable-next-line react/button-has-type\n type={type || 'button'}\n className={classNames}\n disabled={disabled}\n aria-busy={loading}\n >\n <FlexRow\n gap=\"sm\"\n flexWrap=\"nowrap\"\n className={loading ? buttonStyles.hideContent : undefined}\n >\n {iconSlot}\n {children}\n {shouldShowExternalIcon && <LaunchIcon />}\n </FlexRow>\n {loading && (\n <div className={buttonStyles.loadingWrapper} aria-label=\"Loading\">\n <Loader />\n </div>\n )}\n </button>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;;;AAUA;;AAEG;MACU,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,UAAU,EACV,EAAE,EACF,IAAI,EACJ,MAAM,EACN,GAAG,EACH,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACpB,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,GAAG,UAAU,EACE,EACjB,GAA2B,KACzB;AACF,IAAA,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI;IAC7B,MAAM,iBAAiB,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC5D,IAAA,MAAM,gBAAgB,GAAG,UAAU,IAAI,iBAAiB;IAExD,MAAM,UAAU,GAAG,OAAO,CACxB,MACE,oBAAoB,CAAC,gBAAgB,EAAE;QACrC,SAAS;QACT,OAAO;QACP,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,QAAQ;AACT,KAAA,CAAC,EACJ,CAAC,gBAAgB,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC9E;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC;QAC1D,IAAI;QACJ,MAAM;QACN,GAAG;QACH,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,sBAAsB,GAAG,gBAAgB,IAAI,CAAC,oBAAoB;;;AAIxE,IAAA,MAAM,SAAS,GAAG,EAAE,KAAK,cAAc,GAAG,GAAG,GAAG,QAAQ,CAAC;;AAGzD,IAAA,IAAI,EAAE,EAAE;QACN,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACJ,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EAAA,GACN,SAAS,EAAA;YAEZ,QAAQ;YACR,QAAQ;AACR,YAAA,sBAAsB,IAAIA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA,CAAG,CAC/B;AAEf,IAAA;;AAGD,IAAA,IAAI,cAAc,EAAE;AAClB,QAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,UAAU,EAAA,GACjB,SAAS,EAAA;YAEZ,QAAQ;YACR,QAAQ;AACR,YAAA,sBAAsB,IAAIA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA,CAAG,CACvC;AAEP,IAAA;;AAGD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,GACM,UAAU,EACd,GAAG,EAAE,GAAmC;;AAExC,QAAA,IAAI,EAAE,IAAI,IAAI,QAAQ,EACtB,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,QAAQ,eACP,OAAO,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,OAAO,GAAG,YAAY,CAAC,WAAW,GAAG,SAAS,EAAA;YAExD,QAAQ;YACR,QAAQ;AACR,YAAA,sBAAsB,IAAIA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA,CAAG,CACjC;QACT,OAAO,KACNA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,cAAc,EAAA,YAAA,EAAa,SAAS,EAAA;AAC/D,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACN,CACP,CACM;AAEb,CAAC;;;;"}
@@ -0,0 +1,2 @@
1
+ export { Action } from './Action';
2
+ export type * from './types';
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._reset_lpn7m_1 {\n appearance: none;\n border: 0;\n background-color: transparent;\n padding: unset;\n font: inherit;\n text-decoration: none;\n text-align: start;\n color: inherit;\n}\n._reset_lpn7m_1:hover {\n cursor: pointer;\n}");
6
+ var baseStyles = {"reset":"_reset_lpn7m_1"};
7
+
8
+ module.exports = baseStyles;
9
+ //# sourceMappingURL=base.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.module.scss.cjs","sources":["../../../../src/components/Action/styles/base.module.scss"],"sourcesContent":[".reset {\n appearance: none;\n border: 0;\n background-color: transparent;\n padding: unset;\n font: inherit;\n text-decoration: none;\n text-align: start;\n color: inherit;\n\n &:hover {\n cursor: pointer;\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mPAAA;AACA,iBAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._reset_lpn7m_1 {\n appearance: none;\n border: 0;\n background-color: transparent;\n padding: unset;\n font: inherit;\n text-decoration: none;\n text-align: start;\n color: inherit;\n}\n._reset_lpn7m_1:hover {\n cursor: pointer;\n}");
4
+ var baseStyles = {"reset":"_reset_lpn7m_1"};
5
+
6
+ export { baseStyles as default };
7
+ //# sourceMappingURL=base.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.module.scss.js","sources":["../../../../src/components/Action/styles/base.module.scss"],"sourcesContent":[".reset {\n appearance: none;\n border: 0;\n background-color: transparent;\n padding: unset;\n font: inherit;\n text-decoration: none;\n text-align: start;\n color: inherit;\n\n &:hover {\n cursor: pointer;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mPAAA;AACA,iBAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._button_527aj_1 {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-sm);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n height: var(--sizes-10);\n padding-left: var(--sizes-md);\n padding-right: var(--sizes-md);\n border-radius: var(--sizes-sm);\n font-family: var(--text-body-font-family);\n font-style: var(--text-body-font-style);\n font-weight: var(--text-body-font-weight);\n font-size: var(--text-body-font-size);\n line-height: var(--text-body-line-height);\n color: var(--text-body-color);\n text-decoration: var(--text-body-text-decoration);\n letter-spacing: var(--text-body-letter-spacing);\n /* Default button */\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n color: var(--accent-color);\n /* Icon Slot */\n /* External Icon */\n}\n._button_527aj_1 svg:first-child {\n width: var(--sizes-5);\n height: var(--sizes-5);\n}\n._button_527aj_1 svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n}\n._button_527aj_1:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n}\n._button_527aj_1:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n outline: 0;\n}\n._button_527aj_1:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n}\n._button_527aj_1._icon_527aj_58 {\n padding-left: var(--sizes-base);\n}\n._button_527aj_1._iconOnly_527aj_61 {\n width: var(--sizes-10);\n padding-left: var(--sizes-2);\n padding-right: var(--sizes-2);\n}\n._button_527aj_1._compact_527aj_66 {\n --outline-width: 2px;\n height: var(--sizes-lg);\n padding-left: var(--sizes-base);\n padding-right: var(--sizes-base);\n border-radius: var(--sizes-xs);\n font-size: var(--text-body-font-size);\n}\n._button_527aj_1._compact_527aj_66 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._button_527aj_1._compact_527aj_66._icon_527aj_58 {\n padding-left: var(--sizes-sm);\n}\n._button_527aj_1._compact_527aj_66._iconOnly_527aj_61 {\n width: var(--sizes-8);\n padding-left: var(--sizes-sm);\n padding-right: var(--sizes-sm);\n}\n._button_527aj_1._primary_527aj_86 {\n --accent-color: var(--colors-secondary-blue-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n background-color: var(--accent-color);\n border-color: var(--accent-color);\n color: white;\n}\n._button_527aj_1._primary_527aj_86:hover {\n --accent-color: var(--colors-secondary-blue-dark);\n}\n._button_527aj_1._primary_527aj_86:active {\n --accent-color: var(--colors-secondary-blue-dark);\n}\n._button_527aj_1._destructive_527aj_100 {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-dark);\n --highlight-color: var(--colors-secondary-red-light);\n}\n._button_527aj_1._destructive_527aj_100:hover {\n --accent-color: var(--colors-secondary-red-dark);\n}\n._button_527aj_1._flat_527aj_108 {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-secondary-blue-base);\n}\n._button_527aj_1._flat_527aj_108:hover {\n background-color: var(--colors-neutral-grey-light);\n}\n._button_527aj_1._flat_527aj_108:active {\n background-color: var(--colors-neutral-grey-light);\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._button_527aj_1._flat_527aj_108:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n outline: 0;\n}\n._button_527aj_1._flat_527aj_108._disabled_527aj_124 {\n background-color: transparent;\n border-color: transparent;\n}\n._button_527aj_1 ._hideContent_527aj_128 {\n opacity: 0;\n}\n._button_527aj_1 ._loadingWrapper_527aj_131 {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n}\n\n._button_527aj_1:disabled {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n}");
6
+ var buttonStyles = {"button":"_button_527aj_1","icon":"_icon_527aj_58","iconOnly":"_iconOnly_527aj_61","compact":"_compact_527aj_66","primary":"_primary_527aj_86","destructive":"_destructive_527aj_100","flat":"_flat_527aj_108","disabled":"_disabled_527aj_124","hideContent":"_hideContent_527aj_128","loadingWrapper":"_loadingWrapper_527aj_131"};
7
+
8
+ module.exports = buttonStyles;
9
+ //# sourceMappingURL=button.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.module.scss.cjs","sources":["../../../../src/components/Action/styles/button.module.scss"],"sourcesContent":["@use '../../../theme/scss/text.module.scss' as text;\n\n.button {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-sm);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n\n height: var(--sizes-10);\n padding-left: var(--sizes-md);\n padding-right: var(--sizes-md);\n border-radius: var(--sizes-sm);\n\n @include text.body;\n /* Default button */\n\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 15%);\n color: var(--accent-color);\n\n /* Icon Slot */\n svg:first-child {\n width: var(--sizes-5);\n height: var(--sizes-5);\n }\n\n /* External Icon */\n svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n outline: 0;\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n }\n\n &.icon {\n padding-left: var(--sizes-base);\n }\n\n &.iconOnly {\n width: var(--sizes-10);\n padding-left: var(--sizes-2);\n padding-right: var(--sizes-2);\n }\n\n &.compact {\n --outline-width: 2px;\n\n height: var(--sizes-lg);\n padding-left: var(--sizes-base);\n padding-right: var(--sizes-base);\n border-radius: var(--sizes-xs);\n font-size: var(--text-body-font-size);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n &.icon {\n padding-left: var(--sizes-sm);\n }\n\n &.iconOnly {\n width: var(--sizes-8);\n padding-left: var(--sizes-sm);\n padding-right: var(--sizes-sm);\n }\n }\n\n &.primary {\n --accent-color: var(--colors-secondary-blue-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n\n background-color: var(--accent-color);\n border-color: var(--accent-color);\n color: white;\n\n &:hover {\n --accent-color: var(--colors-secondary-blue-dark);\n }\n\n &:active {\n --accent-color: var(--colors-secondary-blue-dark);\n }\n }\n\n &.destructive {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-dark);\n --highlight-color: var(--colors-secondary-red-light);\n\n &:hover {\n --accent-color: var(--colors-secondary-red-dark);\n }\n }\n\n &.flat {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-secondary-blue-base);\n\n &:hover {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-light);\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &.disabled {\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n .hideContent {\n opacity: 0;\n }\n\n .loadingWrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n }\n}\n\n.button:disabled {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,2jJAAA;AACA,mBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._button_527aj_1 {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-sm);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n height: var(--sizes-10);\n padding-left: var(--sizes-md);\n padding-right: var(--sizes-md);\n border-radius: var(--sizes-sm);\n font-family: var(--text-body-font-family);\n font-style: var(--text-body-font-style);\n font-weight: var(--text-body-font-weight);\n font-size: var(--text-body-font-size);\n line-height: var(--text-body-line-height);\n color: var(--text-body-color);\n text-decoration: var(--text-body-text-decoration);\n letter-spacing: var(--text-body-letter-spacing);\n /* Default button */\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n color: var(--accent-color);\n /* Icon Slot */\n /* External Icon */\n}\n._button_527aj_1 svg:first-child {\n width: var(--sizes-5);\n height: var(--sizes-5);\n}\n._button_527aj_1 svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n}\n._button_527aj_1:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n}\n._button_527aj_1:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n outline: 0;\n}\n._button_527aj_1:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n}\n._button_527aj_1._icon_527aj_58 {\n padding-left: var(--sizes-base);\n}\n._button_527aj_1._iconOnly_527aj_61 {\n width: var(--sizes-10);\n padding-left: var(--sizes-2);\n padding-right: var(--sizes-2);\n}\n._button_527aj_1._compact_527aj_66 {\n --outline-width: 2px;\n height: var(--sizes-lg);\n padding-left: var(--sizes-base);\n padding-right: var(--sizes-base);\n border-radius: var(--sizes-xs);\n font-size: var(--text-body-font-size);\n}\n._button_527aj_1._compact_527aj_66 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n}\n._button_527aj_1._compact_527aj_66._icon_527aj_58 {\n padding-left: var(--sizes-sm);\n}\n._button_527aj_1._compact_527aj_66._iconOnly_527aj_61 {\n width: var(--sizes-8);\n padding-left: var(--sizes-sm);\n padding-right: var(--sizes-sm);\n}\n._button_527aj_1._primary_527aj_86 {\n --accent-color: var(--colors-secondary-blue-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n background-color: var(--accent-color);\n border-color: var(--accent-color);\n color: white;\n}\n._button_527aj_1._primary_527aj_86:hover {\n --accent-color: var(--colors-secondary-blue-dark);\n}\n._button_527aj_1._primary_527aj_86:active {\n --accent-color: var(--colors-secondary-blue-dark);\n}\n._button_527aj_1._destructive_527aj_100 {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-dark);\n --highlight-color: var(--colors-secondary-red-light);\n}\n._button_527aj_1._destructive_527aj_100:hover {\n --accent-color: var(--colors-secondary-red-dark);\n}\n._button_527aj_1._flat_527aj_108 {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-secondary-blue-base);\n}\n._button_527aj_1._flat_527aj_108:hover {\n background-color: var(--colors-neutral-grey-light);\n}\n._button_527aj_1._flat_527aj_108:active {\n background-color: var(--colors-neutral-grey-light);\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n}\n._button_527aj_1._flat_527aj_108:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n outline: 0;\n}\n._button_527aj_1._flat_527aj_108._disabled_527aj_124 {\n background-color: transparent;\n border-color: transparent;\n}\n._button_527aj_1 ._hideContent_527aj_128 {\n opacity: 0;\n}\n._button_527aj_1 ._loadingWrapper_527aj_131 {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n}\n\n._button_527aj_1:disabled {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n}");
4
+ var buttonStyles = {"button":"_button_527aj_1","icon":"_icon_527aj_58","iconOnly":"_iconOnly_527aj_61","compact":"_compact_527aj_66","primary":"_primary_527aj_86","destructive":"_destructive_527aj_100","flat":"_flat_527aj_108","disabled":"_disabled_527aj_124","hideContent":"_hideContent_527aj_128","loadingWrapper":"_loadingWrapper_527aj_131"};
5
+
6
+ export { buttonStyles as default };
7
+ //# sourceMappingURL=button.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button.module.scss.js","sources":["../../../../src/components/Action/styles/button.module.scss"],"sourcesContent":["@use '../../../theme/scss/text.module.scss' as text;\n\n.button {\n --outline-width: var(--sizes-xs);\n --accent-color: var(--colors-neutral-ink-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n\n /* Structural styles */\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--sizes-sm);\n flex-shrink: 0;\n border: var(--sizes-line) solid;\n white-space: nowrap;\n\n height: var(--sizes-10);\n padding-left: var(--sizes-md);\n padding-right: var(--sizes-md);\n border-radius: var(--sizes-sm);\n\n @include text.body;\n /* Default button */\n\n border-color: var(--colors-neutral-grey-dark);\n background-color: white;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 15%);\n color: var(--accent-color);\n\n /* Icon Slot */\n svg:first-child {\n width: var(--sizes-5);\n height: var(--sizes-5);\n }\n\n /* External Icon */\n svg:last-child:not(:first-child) {\n width: var(--sizes-4);\n height: var(--sizes-4);\n }\n\n &:hover {\n background-color: var(--colors-neutral-grey-lightest);\n cursor: pointer;\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n outline: 0;\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-lightest);\n border-color: var(--accent-color-dark);\n box-shadow: 0 0 0 var(--outline-width) var(--highlight-color);\n }\n\n &.icon {\n padding-left: var(--sizes-base);\n }\n\n &.iconOnly {\n width: var(--sizes-10);\n padding-left: var(--sizes-2);\n padding-right: var(--sizes-2);\n }\n\n &.compact {\n --outline-width: 2px;\n\n height: var(--sizes-lg);\n padding-left: var(--sizes-base);\n padding-right: var(--sizes-base);\n border-radius: var(--sizes-xs);\n font-size: var(--text-body-font-size);\n\n svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n }\n\n &.icon {\n padding-left: var(--sizes-sm);\n }\n\n &.iconOnly {\n width: var(--sizes-8);\n padding-left: var(--sizes-sm);\n padding-right: var(--sizes-sm);\n }\n }\n\n &.primary {\n --accent-color: var(--colors-secondary-blue-base);\n --accent-color-dark: var(--colors-secondary-blue-dark);\n --highlight-color: var(--colors-secondary-blue-light);\n\n background-color: var(--accent-color);\n border-color: var(--accent-color);\n color: white;\n\n &:hover {\n --accent-color: var(--colors-secondary-blue-dark);\n }\n\n &:active {\n --accent-color: var(--colors-secondary-blue-dark);\n }\n }\n\n &.destructive {\n --accent-color: var(--colors-secondary-red-base);\n --accent-color-dark: var(--colors-secondary-red-dark);\n --highlight-color: var(--colors-secondary-red-light);\n\n &:hover {\n --accent-color: var(--colors-secondary-red-dark);\n }\n }\n\n &.flat {\n border-color: transparent;\n box-shadow: none;\n color: var(--colors-secondary-blue-base);\n\n &:hover {\n background-color: var(--colors-neutral-grey-light);\n }\n\n &:active {\n background-color: var(--colors-neutral-grey-light);\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &.disabled {\n background-color: transparent;\n border-color: transparent;\n }\n }\n\n .hideContent {\n opacity: 0;\n }\n\n .loadingWrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n }\n}\n\n.button:disabled {\n cursor: not-allowed;\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,2jJAAA;AACA,mBAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA;;;;"}
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
4
+
5
+ ___$insertStyle("._link_auji4_1 {\n font-family: var(--text-link-font-family);\n font-style: var(--text-link-font-style);\n font-weight: var(--text-link-font-weight);\n font-size: var(--text-link-font-size);\n line-height: var(--text-link-line-height);\n color: var(--text-link-color);\n text-decoration: var(--text-link-text-decoration);\n letter-spacing: var(--text-link-letter-spacing);\n display: inline-flex;\n align-items: center;\n gap: var(--sizes-xs);\n color: var(--colors-secondary-blue-base);\n text-decoration: underline;\n}\n._link_auji4_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n vertical-align: middle;\n flex-shrink: 0;\n}\n._link_auji4_1._compact_auji4_22 {\n font-family: var(--text-link-small-font-family);\n font-style: var(--text-link-small-font-style);\n font-weight: var(--text-link-small-font-weight);\n font-size: var(--text-link-small-font-size);\n line-height: var(--text-link-small-line-height);\n color: var(--text-link-small-color);\n text-decoration: var(--text-link-small-text-decoration);\n letter-spacing: var(--text-link-small-letter-spacing);\n}\n._link_auji4_1._compact_auji4_22 svg {\n width: var(--sizes-3);\n height: var(--sizes-3);\n}\n._link_auji4_1:hover {\n text-decoration-thickness: 2px;\n cursor: pointer;\n}\n._link_auji4_1:focus-visible {\n outline: 0;\n box-shadow: 0 0 0 var(--sizes-xs) white, 0 0 0 var(--sizes-sm) var(--colors-secondary-blue-light);\n border-radius: var(--sizes-xs);\n}");
6
+ var linkStyles = {"link":"_link_auji4_1","compact":"_compact_auji4_22"};
7
+
8
+ module.exports = linkStyles;
9
+ //# sourceMappingURL=link.module.scss.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"link.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,7 @@
1
+ import insertStyle from '../../../_virtual/____insertStyle.js';
2
+
3
+ insertStyle("._link_auji4_1 {\n font-family: var(--text-link-font-family);\n font-style: var(--text-link-font-style);\n font-weight: var(--text-link-font-weight);\n font-size: var(--text-link-font-size);\n line-height: var(--text-link-line-height);\n color: var(--text-link-color);\n text-decoration: var(--text-link-text-decoration);\n letter-spacing: var(--text-link-letter-spacing);\n display: inline-flex;\n align-items: center;\n gap: var(--sizes-xs);\n color: var(--colors-secondary-blue-base);\n text-decoration: underline;\n}\n._link_auji4_1 svg {\n width: var(--sizes-base);\n height: var(--sizes-base);\n vertical-align: middle;\n flex-shrink: 0;\n}\n._link_auji4_1._compact_auji4_22 {\n font-family: var(--text-link-small-font-family);\n font-style: var(--text-link-small-font-style);\n font-weight: var(--text-link-small-font-weight);\n font-size: var(--text-link-small-font-size);\n line-height: var(--text-link-small-line-height);\n color: var(--text-link-small-color);\n text-decoration: var(--text-link-small-text-decoration);\n letter-spacing: var(--text-link-small-letter-spacing);\n}\n._link_auji4_1._compact_auji4_22 svg {\n width: var(--sizes-3);\n height: var(--sizes-3);\n}\n._link_auji4_1:hover {\n text-decoration-thickness: 2px;\n cursor: pointer;\n}\n._link_auji4_1:focus-visible {\n outline: 0;\n box-shadow: 0 0 0 var(--sizes-xs) white, 0 0 0 var(--sizes-sm) var(--colors-secondary-blue-light);\n border-radius: var(--sizes-xs);\n}");
4
+ var linkStyles = {"link":"_link_auji4_1","compact":"_compact_auji4_22"};
5
+
6
+ export { linkStyles as default };
7
+ //# sourceMappingURL=link.module.scss.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"link.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -0,0 +1,26 @@
1
+ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
2
+ export type ActionAppearance = 'button' | 'link' | 'unstyled';
3
+ export type ActionVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat';
4
+ type BaseActionProps<C extends React.ElementType> = {
5
+ appearance?: ActionAppearance;
6
+ as?: C;
7
+ children?: React.ReactNode;
8
+ className?: string;
9
+ compact?: boolean;
10
+ disabled?: boolean;
11
+ iconSlot?: React.ReactNode;
12
+ loading?: boolean;
13
+ type?: 'button' | 'submit' | 'reset';
14
+ variant?: ActionVariant;
15
+ };
16
+ export type LinkActionProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
17
+ href: string;
18
+ allowedHostnames?: string[];
19
+ hideExternalLinkIcon?: boolean;
20
+ };
21
+ export type ButtonActionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
22
+ href?: never;
23
+ };
24
+ export type ActionOwnProps = LinkActionProps | ButtonActionProps;
25
+ export type ActionProps<C extends React.ElementType> = BaseActionProps<C> & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseActionProps<C> | keyof ActionOwnProps> & ActionOwnProps;
26
+ export {};
@@ -0,0 +1,42 @@
1
+ 'use strict';
2
+
3
+ var buildClassnames = require('../../utils/buildClassnames.cjs');
4
+ require('uid/secure');
5
+ var base_module = require('./styles/base.module.scss.cjs');
6
+ var button_module = require('./styles/button.module.scss.cjs');
7
+ var link_module = require('./styles/link.module.scss.cjs');
8
+
9
+ const getButtonVariantClasses = (variant) => [
10
+ (variant === 'primary' || variant === 'primaryDestructive') && button_module.primary,
11
+ (variant === 'destructive' || variant === 'primaryDestructive') && button_module.destructive,
12
+ variant === 'flat' && button_module.flat,
13
+ ].filter(Boolean);
14
+ const getAppearanceClasses = (appearance, props) => {
15
+ const baseClasses = [props.className, base_module.reset];
16
+ const hasIcon = !!props.iconSlot;
17
+ const isIconOnly = hasIcon && (props.children == null || props.children === '');
18
+ const iconClasses = [hasIcon && button_module.icon, isIconOnly && button_module.iconOnly];
19
+ switch (appearance) {
20
+ case 'button':
21
+ return buildClassnames.buildClassnames([
22
+ ...baseClasses,
23
+ button_module.button,
24
+ ...iconClasses,
25
+ props.disabled && button_module.disabled,
26
+ props.compact && button_module.compact,
27
+ ...getButtonVariantClasses(props.variant),
28
+ ]);
29
+ case 'link':
30
+ return buildClassnames.buildClassnames([
31
+ ...baseClasses,
32
+ link_module.link,
33
+ props.compact && link_module.compact,
34
+ ]);
35
+ default:
36
+ return buildClassnames.buildClassnames(baseClasses);
37
+ }
38
+ };
39
+
40
+ exports.getAppearanceClasses = getAppearanceClasses;
41
+ exports.getButtonVariantClasses = getButtonVariantClasses;
42
+ //# sourceMappingURL=utils.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.cjs","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n className?: string;\n variant?: ActionVariant;\n disabled?: boolean;\n compact?: boolean;\n iconSlot?: React.ReactNode;\n children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n [\n (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n variant === 'flat' && buttonStyles.flat,\n ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n const baseClasses = [props.className, baseStyles.reset];\n const hasIcon = !!props.iconSlot;\n const isIconOnly = hasIcon && (props.children == null || props.children === '');\n const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n switch (appearance) {\n case 'button':\n return buildClassnames([\n ...baseClasses,\n buttonStyles.button,\n ...iconClasses,\n props.disabled && buttonStyles.disabled,\n props.compact && buttonStyles.compact,\n ...getButtonVariantClasses(props.variant),\n ]);\n case 'link':\n return buildClassnames([\n ...baseClasses,\n linkStyles.link,\n props.compact && linkStyles.compact,\n ]);\n default:\n return buildClassnames(baseClasses);\n }\n};\n"],"names":["buttonStyles","baseStyles","buildClassnames","linkStyles"],"mappings":";;;;;;;;MAgBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAKA,aAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAIA,aAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAEC,WAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAID,aAAY,CAAC,IAAI,EAAE,UAAU,IAAIA,aAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAF,aAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAIA,aAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,OAAO,IAAIA,aAAY,CAAC,OAAO;AACrC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAOE,+BAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAAC,WAAU,CAAC,IAAI;AACf,gBAAA,KAAK,CAAC,OAAO,IAAIA,WAAU,CAAC,OAAO;AACpC,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAOD,+BAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;;"}
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { ActionAppearance, ActionVariant } from './types';
3
+ type AppearanceClassProps = {
4
+ className?: string;
5
+ variant?: ActionVariant;
6
+ disabled?: boolean;
7
+ compact?: boolean;
8
+ iconSlot?: React.ReactNode;
9
+ children?: React.ReactNode;
10
+ };
11
+ export declare const getButtonVariantClasses: (variant?: ActionVariant) => any[];
12
+ export declare const getAppearanceClasses: (appearance: ActionAppearance, props: AppearanceClassProps) => string;
13
+ export {};
@@ -0,0 +1,39 @@
1
+ import { buildClassnames } from '../../utils/buildClassnames.js';
2
+ import 'uid/secure';
3
+ import baseStyles from './styles/base.module.scss.js';
4
+ import buttonStyles from './styles/button.module.scss.js';
5
+ import linkStyles from './styles/link.module.scss.js';
6
+
7
+ const getButtonVariantClasses = (variant) => [
8
+ (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,
9
+ (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,
10
+ variant === 'flat' && buttonStyles.flat,
11
+ ].filter(Boolean);
12
+ const getAppearanceClasses = (appearance, props) => {
13
+ const baseClasses = [props.className, baseStyles.reset];
14
+ const hasIcon = !!props.iconSlot;
15
+ const isIconOnly = hasIcon && (props.children == null || props.children === '');
16
+ const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];
17
+ switch (appearance) {
18
+ case 'button':
19
+ return buildClassnames([
20
+ ...baseClasses,
21
+ buttonStyles.button,
22
+ ...iconClasses,
23
+ props.disabled && buttonStyles.disabled,
24
+ props.compact && buttonStyles.compact,
25
+ ...getButtonVariantClasses(props.variant),
26
+ ]);
27
+ case 'link':
28
+ return buildClassnames([
29
+ ...baseClasses,
30
+ linkStyles.link,
31
+ props.compact && linkStyles.compact,
32
+ ]);
33
+ default:
34
+ return buildClassnames(baseClasses);
35
+ }
36
+ };
37
+
38
+ export { getAppearanceClasses, getButtonVariantClasses };
39
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../../../src/components/Action/utils.ts"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../utils';\nimport baseStyles from './styles/base.module.scss';\nimport buttonStyles from './styles/button.module.scss';\nimport linkStyles from './styles/link.module.scss';\nimport { ActionAppearance, ActionVariant } from './types';\n\ntype AppearanceClassProps = {\n className?: string;\n variant?: ActionVariant;\n disabled?: boolean;\n compact?: boolean;\n iconSlot?: React.ReactNode;\n children?: React.ReactNode;\n};\n\nexport const getButtonVariantClasses = (variant?: ActionVariant) =>\n [\n (variant === 'primary' || variant === 'primaryDestructive') && buttonStyles.primary,\n (variant === 'destructive' || variant === 'primaryDestructive') && buttonStyles.destructive,\n variant === 'flat' && buttonStyles.flat,\n ].filter(Boolean);\n\nexport const getAppearanceClasses = (appearance: ActionAppearance, props: AppearanceClassProps) => {\n const baseClasses = [props.className, baseStyles.reset];\n const hasIcon = !!props.iconSlot;\n const isIconOnly = hasIcon && (props.children == null || props.children === '');\n const iconClasses = [hasIcon && buttonStyles.icon, isIconOnly && buttonStyles.iconOnly];\n\n switch (appearance) {\n case 'button':\n return buildClassnames([\n ...baseClasses,\n buttonStyles.button,\n ...iconClasses,\n props.disabled && buttonStyles.disabled,\n props.compact && buttonStyles.compact,\n ...getButtonVariantClasses(props.variant),\n ]);\n case 'link':\n return buildClassnames([\n ...baseClasses,\n linkStyles.link,\n props.compact && linkStyles.compact,\n ]);\n default:\n return buildClassnames(baseClasses);\n }\n};\n"],"names":[],"mappings":";;;;;;MAgBa,uBAAuB,GAAG,CAAC,OAAuB,KAC7D;IACE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,OAAO;IACnF,CAAC,OAAO,KAAK,aAAa,IAAI,OAAO,KAAK,oBAAoB,KAAK,YAAY,CAAC,WAAW;AAC3F,IAAA,OAAO,KAAK,MAAM,IAAI,YAAY,CAAC,IAAI;AACxC,CAAA,CAAC,MAAM,CAAC,OAAO;MAEL,oBAAoB,GAAG,CAAC,UAA4B,EAAE,KAA2B,KAAI;IAChG,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,CAAC,QAAQ;AAChC,IAAA,MAAM,UAAU,GAAG,OAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC;AAC/E,IAAA,MAAM,WAAW,GAAG,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,EAAE,UAAU,IAAI,YAAY,CAAC,QAAQ,CAAC;AAEvF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,YAAY,CAAC,MAAM;AACnB,gBAAA,GAAG,WAAW;AACd,gBAAA,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,QAAQ;AACvC,gBAAA,KAAK,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO;AACrC,gBAAA,GAAG,uBAAuB,CAAC,KAAK,CAAC,OAAO,CAAC;AAC1C,aAAA,CAAC;AACJ,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,eAAe,CAAC;AACrB,gBAAA,GAAG,WAAW;AACd,gBAAA,UAAU,CAAC,IAAI;AACf,gBAAA,KAAK,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO;AACpC,aAAA,CAAC;AACJ,QAAA;AACE,YAAA,OAAO,eAAe,CAAC,WAAW,CAAC;AACtC;AACH;;;;"}
@@ -5,16 +5,18 @@ var sizes = require('../../theme/modules/sizes.cjs');
5
5
  var urlUtils = require('./utils/urlUtils.cjs');
6
6
  var buildClassnames = require('../../utils/buildClassnames.cjs');
7
7
  require('uid/secure');
8
+ var isExternalLink = require('./isExternalLink.cjs');
8
9
  var Anchor_module = require('./Anchor.module.scss.cjs');
9
10
  var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
10
11
  var LaunchIcon = require('../../icons/design-system/components/LaunchIcon.cjs');
11
- var isExternalLink = require('./isExternalLink.cjs');
12
12
 
13
13
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
14
14
 
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
 
17
17
  /**
18
+ * @deprecated Use the `Action` component instead
19
+ *
18
20
  * Anchor component for handling context-aware links with consistent functionality and styling options.
19
21
  *
20
22
  * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
@@ -1 +1 @@
1
- {"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React","createContextAwareUrl","isExternalLink","buildClassnames","styles","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;;;AAYA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,sBAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGC,8BAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAGC,+BAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAIC,aAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAIA,aAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAIA,aAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,qCAACK,uBAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBN,sBAAA,CAAA,aAAA,CAACO,yBAAU,EAAA,EACT,IAAI,EAAC,cAAc,EAAA,aAAA,EACP,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAAA,CAC/B,CACH,CACC;AAER,CAAC;;;;"}
1
+ {"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * @deprecated Use the `Action` component instead\n *\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React","createContextAwareUrl","isExternalLink","buildClassnames","styles","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA;;;;;;;;;;;;AAYG;MACU,MAAM,GAAGA,sBAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGC,8BAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAGC,+BAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAIC,aAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAIA,aAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAIA,aAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEJ,sBAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,qCAACK,uBAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBN,sBAAA,CAAA,aAAA,CAACO,yBAAU,EAAA,EACT,IAAI,EAAC,cAAc,EAAA,aAAA,EACP,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAAA,CAC/B,CACH,CACC;AAER,CAAC;;;;"}
@@ -1,6 +1,8 @@
1
1
  import React from 'react';
2
2
  import { AnchorProps } from './types';
3
3
  /**
4
+ * @deprecated Use the `Action` component instead
5
+ *
4
6
  * Anchor component for handling context-aware links with consistent functionality and styling options.
5
7
  *
6
8
  * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
@@ -3,12 +3,14 @@ import { sizes } from '../../theme/modules/sizes.js';
3
3
  import { createContextAwareUrl } from './utils/urlUtils.js';
4
4
  import { buildClassnames } from '../../utils/buildClassnames.js';
5
5
  import 'uid/secure';
6
+ import { isExternalLink } from './isExternalLink.js';
6
7
  import styles from './Anchor.module.scss.js';
7
8
  import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
8
9
  import { ReactComponent as LaunchIcon } from '../../icons/design-system/components/LaunchIcon.js';
9
- import { isExternalLink } from './isExternalLink.js';
10
10
 
11
11
  /**
12
+ * @deprecated Use the `Action` component instead
13
+ *
12
14
  * Anchor component for handling context-aware links with consistent functionality and styling options.
13
15
  *
14
16
  * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
@@ -1 +1 @@
1
- {"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;AAYA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,cAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAG,eAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,6BAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,cAAc,EAAA,aAAA,EACP,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAC/B,CACH,CACC;AAER,CAAC;;;;"}
1
+ {"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * @deprecated Use the `Action` component instead\n *\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;AAUA;;;;;;;;;;;;AAYG;MACU,MAAM,GAAGA,cAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAG,eAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,6BAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,cAAc,EAAA,aAAA,EACP,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAC/B,CACH,CACC;AAER,CAAC;;;;"}
@@ -19,6 +19,9 @@ const variantMap = {
19
19
  link: styled.LinkButton,
20
20
  unstyled: styled.UnstyledButton,
21
21
  };
22
+ /**
23
+ * @deprecated Use the `Action` component instead
24
+ */
22
25
  const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
23
26
  if (variant === 'unstyled') {
24
27
  return (React__default.default.createElement(styled.UnstyledButton, { ref: ref, className: className, ...otherProps }, children));
@@ -37,4 +40,5 @@ const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant =
37
40
  const Button = withTokens.withTokens(ButtonBase);
38
41
 
39
42
  exports.Button = Button;
43
+ exports.ButtonBase = ButtonBase;
40
44
  //# sourceMappingURL=Button.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\nconst ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <UnstyledButton ref={ref} className={className} {...otherProps}>\n {children}\n </UnstyledButton>\n );\n }\n\n const VariantButton = variantMap[variant];\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n return (\n <VariantButton\n ref={ref}\n className={className}\n size={size}\n hasText={hasChildren}\n hasIcon={hasIcon}\n hasDropdown={dropdown}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <MainContent\n $loading={loading}\n hasText={!!children}\n size={children || size === 'sm' ? 'base' : 'md'}\n style={contentStyles}\n >\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </MainContent>\n )}\n\n {loading && (\n <LoadingWrapper>\n <Loader />\n </LoadingWrapper>\n )}\n </VariantButton>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["DefaultButton","PrimaryButton","DefaultDestructiveButton","PrimaryDestructiveButton","FlatButton","LinkButton","UnstyledButton","forwardRef","React","MainContent","DropdownIcon","LoadingWrapper","Loader","withTokens"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAEA,oBAAa;AACtB,IAAA,OAAO,EAAEC,oBAAa;AACtB,IAAA,WAAW,EAAEC,+BAAwB;AACrC,IAAA,kBAAkB,EAAEC,+BAAwB;AAC5C,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,QAAQ,EAAEC,qBAAc;CACzB;AAED,MAAM,UAAU,GAAGC,gBAAU,CAC3B,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACF,qBAAc,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,UAAU,IAC3D,QAAQ,CACM;AAEpB,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAID,sBAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNF,sBAAA,CAAA,aAAA,CAACG,qBAAc,EAAA,IAAA;AACb,YAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,CAAG,CACK,CAClB,CACa;AAEpB,CAAC,CACF;MAEY,MAAM,GAAGC,qBAAU,CAAC,UAAU;;;;"}
1
+ {"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <UnstyledButton ref={ref} className={className} {...otherProps}>\n {children}\n </UnstyledButton>\n );\n }\n\n const VariantButton = variantMap[variant];\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n return (\n <VariantButton\n ref={ref}\n className={className}\n size={size}\n hasText={hasChildren}\n hasIcon={hasIcon}\n hasDropdown={dropdown}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <MainContent\n $loading={loading}\n hasText={!!children}\n size={children || size === 'sm' ? 'base' : 'md'}\n style={contentStyles}\n >\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </MainContent>\n )}\n\n {loading && (\n <LoadingWrapper>\n <Loader />\n </LoadingWrapper>\n )}\n </VariantButton>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["DefaultButton","PrimaryButton","DefaultDestructiveButton","PrimaryDestructiveButton","FlatButton","LinkButton","UnstyledButton","forwardRef","React","MainContent","DropdownIcon","LoadingWrapper","Loader","withTokens"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAEA,oBAAa;AACtB,IAAA,OAAO,EAAEC,oBAAa;AACtB,IAAA,WAAW,EAAEC,+BAAwB;AACrC,IAAA,kBAAkB,EAAEC,+BAAwB;AAC5C,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,IAAI,EAAEC,iBAAU;AAChB,IAAA,QAAQ,EAAEC,qBAAc;CACzB;AAED;;AAEG;AACI,MAAM,UAAU,GAAGC,gBAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACF,qBAAc,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,UAAU,IAC3D,QAAQ,CACM;AAEpB,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEE,sBAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,sBAAA,CAAA,aAAA,CAACC,kBAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAID,sBAAA,CAAA,aAAA,CAACE,yBAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNF,sBAAA,CAAA,aAAA,CAACG,qBAAc,EAAA,IAAA;AACb,YAAAH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,IAAA,CAAG,CACK,CAClB,CACa;AAEpB,CAAC;MAGU,MAAM,GAAGC,qBAAU,CAAC,UAAU;;;;;"}
@@ -1,4 +1,16 @@
1
1
  import React from 'react';
2
+ /**
3
+ * @deprecated Use the `Action` component instead
4
+ */
5
+ export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
6
+ children?: React.ReactNode;
7
+ variant?: import("./types").ButtonVariant | undefined;
8
+ size?: "base" | "sm" | undefined;
9
+ iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
10
+ dropdown?: boolean | undefined;
11
+ loading?: boolean | undefined;
12
+ contentStyles?: React.CSSProperties | undefined;
13
+ } & React.RefAttributes<HTMLButtonElement>>;
2
14
  export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
3
15
  children?: React.ReactNode;
4
16
  variant?: import("./types").ButtonVariant | undefined;
@@ -13,6 +13,9 @@ const variantMap = {
13
13
  link: LinkButton,
14
14
  unstyled: UnstyledButton,
15
15
  };
16
+ /**
17
+ * @deprecated Use the `Action` component instead
18
+ */
16
19
  const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
17
20
  if (variant === 'unstyled') {
18
21
  return (React__default.createElement(UnstyledButton, { ref: ref, className: className, ...otherProps }, children));
@@ -30,5 +33,5 @@ const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'defau
30
33
  });
31
34
  const Button = withTokens(ButtonBase);
32
35
 
33
- export { Button };
36
+ export { Button, ButtonBase };
34
37
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\nconst ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <UnstyledButton ref={ref} className={className} {...otherProps}>\n {children}\n </UnstyledButton>\n );\n }\n\n const VariantButton = variantMap[variant];\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n return (\n <VariantButton\n ref={ref}\n className={className}\n size={size}\n hasText={hasChildren}\n hasIcon={hasIcon}\n hasDropdown={dropdown}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <MainContent\n $loading={loading}\n hasText={!!children}\n size={children || size === 'sm' ? 'base' : 'md'}\n style={contentStyles}\n >\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </MainContent>\n )}\n\n {loading && (\n <LoadingWrapper>\n <Loader />\n </LoadingWrapper>\n )}\n </VariantButton>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,kBAAkB,EAAE,wBAAwB;AAC5C,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,QAAQ,EAAE,cAAc;CACzB;AAED,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,UAAU,IAC3D,QAAQ,CACM;AAEpB,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACK,CAClB,CACa;AAEpB,CAAC,CACF;MAEY,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\n\nimport {\n DefaultButton,\n DefaultDestructiveButton,\n PrimaryButton,\n PrimaryDestructiveButton,\n FlatButton,\n LinkButton,\n UnstyledButton,\n LoadingWrapper,\n MainContent,\n} from './components/styled';\nimport { DropdownIcon } from '../../icons';\n\nconst variantMap = {\n default: DefaultButton,\n primary: PrimaryButton,\n destructive: DefaultDestructiveButton,\n primaryDestructive: PrimaryDestructiveButton,\n flat: FlatButton,\n link: LinkButton,\n unstyled: UnstyledButton,\n};\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <UnstyledButton ref={ref} className={className} {...otherProps}>\n {children}\n </UnstyledButton>\n );\n }\n\n const VariantButton = variantMap[variant];\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n return (\n <VariantButton\n ref={ref}\n className={className}\n size={size}\n hasText={hasChildren}\n hasIcon={hasIcon}\n hasDropdown={dropdown}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <MainContent\n $loading={loading}\n hasText={!!children}\n size={children || size === 'sm' ? 'base' : 'md'}\n style={contentStyles}\n >\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </MainContent>\n )}\n\n {loading && (\n <LoadingWrapper>\n <Loader />\n </LoadingWrapper>\n )}\n </VariantButton>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":";;;;;;AAmBA,MAAM,UAAU,GAAG;AACjB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,WAAW,EAAE,wBAAwB;AACrC,IAAA,kBAAkB,EAAE,wBAAwB;AAC5C,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,QAAQ,EAAE,cAAc;CACzB;AAED;;AAEG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,EACb,GAAG,UAAU,EACD,EACd,GAAG,KACD;IACF,IAAI,OAAO,KAAK,UAAU,EAAE;AAC1B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,GAAM,UAAU,IAC3D,QAAQ,CACM;AAEpB,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,WAAW,GAAG,QAAQ,KAAK,SAAS;AAC1C,IAAA,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ;AAC1B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,QAAQ,EAAA,GACjB,UAAU,EAAA;AAEb,QAAA,CAAC,WAAW,IAAI,OAAO,MACtBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAA,UAAA,EACA,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,QAAQ,EACnB,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI,EAC/C,KAAK,EAAE,aAAa,EAAA;AAEnB,YAAA,QAAQ,IAAI,QAAQ;YACpB,QAAQ,KAAK,SAAS,IAAI,QAAQ;AAClC,YAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,IAAA,CAAG,CACjB,CACf;QAEA,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA;AACb,YAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACK,CAClB,CACa;AAEpB,CAAC;MAGU,MAAM,GAAG,UAAU,CAAC,UAAU;;;;"}
@@ -1,2 +1,2 @@
1
1
  import { ColumnAlignment } from '../types';
2
- export declare function alignmentToFlex(align: ColumnAlignment): "center" | "flex-end" | "flex-start";
2
+ export declare function alignmentToFlex(align: ColumnAlignment): "center" | "flex-start" | "flex-end";
@@ -6,6 +6,6 @@ export declare const FeatureBanner: React.ForwardRefExoticComponent<Omit<React.H
6
6
  title: string;
7
7
  contentSlot?: React.ReactNode;
8
8
  iconSlot?: React.ReactNode;
9
- actions?: import("..").Action[] | undefined;
9
+ actions?: import("..").ModalAction[] | undefined;
10
10
  onClose?: (() => void) | undefined;
11
11
  } & React.RefAttributes<never>>;
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import { FlexDefaultProps } from '../types';
3
3
  export declare const FLEX_COL_DEFAULT_PROPS: FlexDefaultProps;
4
4
  export declare const FlexCol: React.ForwardRefExoticComponent<{
5
- alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
6
- justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
5
+ alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
6
+ justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
7
7
  gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
8
8
  flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
9
9
  flexGrow?: import("csstype").Property.FlexGrow | undefined;
@@ -2,8 +2,8 @@ import React from 'react';
2
2
  import { FlexDefaultProps } from '../types';
3
3
  export declare const FLEX_ROW_DEFAULT_PROPS: FlexDefaultProps;
4
4
  export declare const FlexRow: React.ForwardRefExoticComponent<{
5
- alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
6
- justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
5
+ alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
6
+ justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
7
7
  gap?: keyof import("../../../theme/modules/sizes").SizeScale | undefined;
8
8
  flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
9
9
  flexGrow?: import("csstype").Property.FlexGrow | undefined;
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  export declare const PageLimitContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
3
- alignItems?: ("baseline" | "center" | "stretch" | "flex-end" | "flex-start") | undefined;
4
- justifyContent?: ("center" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start") | undefined;
3
+ alignItems?: ("baseline" | "center" | "flex-start" | "flex-end" | "stretch") | undefined;
4
+ justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly") | undefined;
5
5
  gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
6
6
  flexWrap?: ("wrap" | "nowrap" | "wrap-reverse") | undefined;
7
7
  flexGrow?: import("csstype").Property.FlexGrow | undefined;
@@ -1,4 +1,5 @@
1
1
  export { Accordion } from './Accordion';
2
+ export { Action, type ActionProps, type ActionVariant } from './Action';
2
3
  export { ActionMenu } from './ActionMenu';
3
4
  export { Alert } from './Alerts/Alert';
4
5
  export { MiniAlert } from './Alerts/MiniAlert';
@@ -37,7 +38,7 @@ export { InputGroup } from './InputGroup';
37
38
  export { LegacyDataTable } from './LegacyDataTable';
38
39
  export { Loader } from './Loader';
39
40
  export { LoginWithAmazonButton } from './LoginWithAmazonButton';
40
- export { Modal, type Action } from './Modal';
41
+ export { Modal, type Action as ModalAction } from './Modal';
41
42
  export { Pagination } from './Pagination';
42
43
  export { Popover } from './Popover';
43
44
  export { Portal } from './Portal';
@@ -54,7 +55,7 @@ export { Skeleton } from './Skeleton';
54
55
  export { Slider } from './Slider';
55
56
  export { Stack, type StackProps } from './Stack';
56
57
  export { Stepper } from './Stepper';
57
- export { SystemBanner, type SystemBannerProps, type SystemBannerVariant, } from './SystemBanner';
58
+ export { SystemBanner, type SystemBannerProps, type SystemBannerVariant } from './SystemBanner';
58
59
  export { Tag } from './Tag';
59
60
  export { Text } from './Text';
60
61
  export { TextField, type TextFieldType } from './TextField';
package/dist/index.cjs CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var Accordion = require('./components/Accordion/Accordion.cjs');
4
+ var Action = require('./components/Action/Action.cjs');
4
5
  var ActionMenu = require('./components/ActionMenu/ActionMenu.cjs');
5
6
  var Alert = require('./components/Alerts/Alert/Alert.cjs');
6
7
  var MiniAlert = require('./components/Alerts/MiniAlert/MiniAlert.cjs');
@@ -116,6 +117,7 @@ var generateId = require('./utils/generateId.cjs');
116
117
  var assignCssVars = require('./utils/assignCssVars.cjs');
117
118
  var buildChannelMarkUrl = require('./utils/buildChannelMarkUrl.cjs');
118
119
  var buildCarrierMarkUrl = require('./utils/buildCarrierMarkUrl.cjs');
120
+ var getContextAwareLink = require('./utils/getContextAwareLink.cjs');
119
121
  var index$6 = require('./theme/index.cjs');
120
122
  var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
121
123
  var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
@@ -348,6 +350,7 @@ var utils = require('./theme/utils.cjs');
348
350
 
349
351
 
350
352
  exports.Accordion = Accordion.Accordion;
353
+ exports.Action = Action.Action;
351
354
  exports.ActionMenu = ActionMenu.ActionMenu;
352
355
  exports.Alert = Alert.Alert;
353
356
  exports.MiniAlert = MiniAlert.MiniAlert;
@@ -483,6 +486,7 @@ exports.generateId = generateId.generateId;
483
486
  exports.assignCssVars = assignCssVars.assignCssVars;
484
487
  exports.buildChannelMarkUrl = buildChannelMarkUrl.buildChannelMarkUrl;
485
488
  exports.buildCarrierMarkUrl = buildCarrierMarkUrl.buildCarrierMarkUrl;
489
+ exports.getContextAwareLink = getContextAwareLink.getContextAwareLink;
486
490
  exports.theme = index$6.theme;
487
491
  exports.AccountsIcon = AccountsIcon.ReactComponent;
488
492
  exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Accordion } from './components/Accordion/Accordion.js';
2
+ export { Action } from './components/Action/Action.js';
2
3
  export { ActionMenu } from './components/ActionMenu/ActionMenu.js';
3
4
  export { Alert } from './components/Alerts/Alert/Alert.js';
4
5
  export { MiniAlert } from './components/Alerts/MiniAlert/MiniAlert.js';
@@ -114,6 +115,7 @@ export { generateId } from './utils/generateId.js';
114
115
  export { assignCssVars } from './utils/assignCssVars.js';
115
116
  export { buildChannelMarkUrl } from './utils/buildChannelMarkUrl.js';
116
117
  export { buildCarrierMarkUrl } from './utils/buildCarrierMarkUrl.js';
118
+ export { getContextAwareLink } from './utils/getContextAwareLink.js';
117
119
  export { theme } from './theme/index.js';
118
120
  export { ReactComponent as AccountsIcon } from './icons/design-system/components/AccountsIcon.js';
119
121
  export { ReactComponent as AccountsOutlineIcon } from './icons/design-system/components/AccountsOutlineIcon.js';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,43 @@
1
+ 'use strict';
2
+
3
+ var urlUtils = require('../components/Anchor/utils/urlUtils.cjs');
4
+ var isExternalLink = require('../components/Anchor/isExternalLink.cjs');
5
+
6
+ /**
7
+ * Creates context-aware link properties with security defaults for external links.
8
+ *
9
+ * @param options - Link configuration options
10
+ * @param options.href - The URL to link to
11
+ * @param options.target - Where to open the link (defaults to '_blank' for external links)
12
+ * @param options.rel - Link relationship (defaults to 'noopener noreferrer' for external links)
13
+ * @param options.allowedHostnames - Hostnames considered internal (won't be treated as external)
14
+ * @returns Object containing processed link props and external icon visibility flag
15
+ */
16
+ function getContextAwareLink({ href, target, rel, allowedHostnames, }) {
17
+ if (!href) {
18
+ return {
19
+ linkProps: {
20
+ href: undefined,
21
+ target: undefined,
22
+ rel: undefined,
23
+ },
24
+ showExternalIcon: false,
25
+ };
26
+ }
27
+ const processedHref = urlUtils.createContextAwareUrl(href);
28
+ const isExternal = isExternalLink.isExternalLink(processedHref, allowedHostnames);
29
+ const secureTarget = target || (isExternal ? '_blank' : undefined);
30
+ const secureRel = secureTarget === '_blank' ? 'noopener noreferrer' : rel;
31
+ const showExternalIcon = isExternal || secureTarget === '_blank';
32
+ return {
33
+ linkProps: {
34
+ href: processedHref,
35
+ target: secureTarget,
36
+ rel: secureRel,
37
+ },
38
+ showExternalIcon,
39
+ };
40
+ }
41
+
42
+ exports.getContextAwareLink = getContextAwareLink;
43
+ //# sourceMappingURL=getContextAwareLink.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getContextAwareLink.cjs","sources":["../../src/utils/getContextAwareLink.ts"],"sourcesContent":["import { AnchorHTMLAttributes } from 'react';\nimport { createContextAwareUrl } from '../components/Anchor/utils/urlUtils';\nimport { isExternalLink } from '../components/Anchor/isExternalLink';\n\ntype GetContextAwareLinkOptions = {\n href?: AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];\n allowedHostnames?: string[];\n};\n\ntype GetContextAwareLinkReturn = {\n linkProps: {\n href?: string;\n target?: string;\n rel?: string;\n };\n showExternalIcon: boolean;\n};\n\n/**\n * Creates context-aware link properties with security defaults for external links.\n * \n * @param options - Link configuration options\n * @param options.href - The URL to link to\n * @param options.target - Where to open the link (defaults to '_blank' for external links)\n * @param options.rel - Link relationship (defaults to 'noopener noreferrer' for external links)\n * @param options.allowedHostnames - Hostnames considered internal (won't be treated as external)\n * @returns Object containing processed link props and external icon visibility flag\n */\nexport function getContextAwareLink({\n href,\n target,\n rel,\n allowedHostnames,\n}: GetContextAwareLinkOptions): GetContextAwareLinkReturn {\n if (!href) {\n return {\n linkProps: {\n href: undefined,\n target: undefined,\n rel: undefined,\n },\n showExternalIcon: false,\n };\n }\n\n const processedHref = createContextAwareUrl(href);\n const isExternal = isExternalLink(processedHref, allowedHostnames);\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = secureTarget === '_blank' ? 'noopener noreferrer' : rel;\n const showExternalIcon = isExternal || secureTarget === '_blank';\n\n return {\n linkProps: {\n href: processedHref,\n target: secureTarget,\n rel: secureRel,\n },\n showExternalIcon,\n };\n}\n"],"names":["createContextAwareUrl","isExternalLink"],"mappings":";;;;;AAoBA;;;;;;;;;AASG;AACG,SAAU,mBAAmB,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,GAAG,EACH,gBAAgB,GACW,EAAA;IAC3B,IAAI,CAAC,IAAI,EAAE;QACT,OAAO;AACL,YAAA,SAAS,EAAE;AACT,gBAAA,IAAI,EAAE,SAAS;AACf,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,GAAG,EAAE,SAAS;AACf,aAAA;AACD,YAAA,gBAAgB,EAAE,KAAK;SACxB;AACF,IAAA;AAED,IAAA,MAAM,aAAa,GAAGA,8BAAqB,CAAC,IAAI,CAAC;IACjD,MAAM,UAAU,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC;AAClE,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,QAAQ,GAAG,qBAAqB,GAAG,GAAG;AACzE,IAAA,MAAM,gBAAgB,GAAG,UAAU,IAAI,YAAY,KAAK,QAAQ;IAEhE,OAAO;AACL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,MAAM,EAAE,YAAY;AACpB,YAAA,GAAG,EAAE,SAAS;AACf,SAAA;QACD,gBAAgB;KACjB;AACH;;;;"}
@@ -0,0 +1,27 @@
1
+ import { AnchorHTMLAttributes } from 'react';
2
+ type GetContextAwareLinkOptions = {
3
+ href?: AnchorHTMLAttributes<HTMLAnchorElement>['href'];
4
+ target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
5
+ rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
6
+ allowedHostnames?: string[];
7
+ };
8
+ type GetContextAwareLinkReturn = {
9
+ linkProps: {
10
+ href?: string;
11
+ target?: string;
12
+ rel?: string;
13
+ };
14
+ showExternalIcon: boolean;
15
+ };
16
+ /**
17
+ * Creates context-aware link properties with security defaults for external links.
18
+ *
19
+ * @param options - Link configuration options
20
+ * @param options.href - The URL to link to
21
+ * @param options.target - Where to open the link (defaults to '_blank' for external links)
22
+ * @param options.rel - Link relationship (defaults to 'noopener noreferrer' for external links)
23
+ * @param options.allowedHostnames - Hostnames considered internal (won't be treated as external)
24
+ * @returns Object containing processed link props and external icon visibility flag
25
+ */
26
+ export declare function getContextAwareLink({ href, target, rel, allowedHostnames, }: GetContextAwareLinkOptions): GetContextAwareLinkReturn;
27
+ export {};
@@ -0,0 +1,41 @@
1
+ import { createContextAwareUrl } from '../components/Anchor/utils/urlUtils.js';
2
+ import { isExternalLink } from '../components/Anchor/isExternalLink.js';
3
+
4
+ /**
5
+ * Creates context-aware link properties with security defaults for external links.
6
+ *
7
+ * @param options - Link configuration options
8
+ * @param options.href - The URL to link to
9
+ * @param options.target - Where to open the link (defaults to '_blank' for external links)
10
+ * @param options.rel - Link relationship (defaults to 'noopener noreferrer' for external links)
11
+ * @param options.allowedHostnames - Hostnames considered internal (won't be treated as external)
12
+ * @returns Object containing processed link props and external icon visibility flag
13
+ */
14
+ function getContextAwareLink({ href, target, rel, allowedHostnames, }) {
15
+ if (!href) {
16
+ return {
17
+ linkProps: {
18
+ href: undefined,
19
+ target: undefined,
20
+ rel: undefined,
21
+ },
22
+ showExternalIcon: false,
23
+ };
24
+ }
25
+ const processedHref = createContextAwareUrl(href);
26
+ const isExternal = isExternalLink(processedHref, allowedHostnames);
27
+ const secureTarget = target || (isExternal ? '_blank' : undefined);
28
+ const secureRel = secureTarget === '_blank' ? 'noopener noreferrer' : rel;
29
+ const showExternalIcon = isExternal || secureTarget === '_blank';
30
+ return {
31
+ linkProps: {
32
+ href: processedHref,
33
+ target: secureTarget,
34
+ rel: secureRel,
35
+ },
36
+ showExternalIcon,
37
+ };
38
+ }
39
+
40
+ export { getContextAwareLink };
41
+ //# sourceMappingURL=getContextAwareLink.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getContextAwareLink.js","sources":["../../src/utils/getContextAwareLink.ts"],"sourcesContent":["import { AnchorHTMLAttributes } from 'react';\nimport { createContextAwareUrl } from '../components/Anchor/utils/urlUtils';\nimport { isExternalLink } from '../components/Anchor/isExternalLink';\n\ntype GetContextAwareLinkOptions = {\n href?: AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel'];\n allowedHostnames?: string[];\n};\n\ntype GetContextAwareLinkReturn = {\n linkProps: {\n href?: string;\n target?: string;\n rel?: string;\n };\n showExternalIcon: boolean;\n};\n\n/**\n * Creates context-aware link properties with security defaults for external links.\n * \n * @param options - Link configuration options\n * @param options.href - The URL to link to\n * @param options.target - Where to open the link (defaults to '_blank' for external links)\n * @param options.rel - Link relationship (defaults to 'noopener noreferrer' for external links)\n * @param options.allowedHostnames - Hostnames considered internal (won't be treated as external)\n * @returns Object containing processed link props and external icon visibility flag\n */\nexport function getContextAwareLink({\n href,\n target,\n rel,\n allowedHostnames,\n}: GetContextAwareLinkOptions): GetContextAwareLinkReturn {\n if (!href) {\n return {\n linkProps: {\n href: undefined,\n target: undefined,\n rel: undefined,\n },\n showExternalIcon: false,\n };\n }\n\n const processedHref = createContextAwareUrl(href);\n const isExternal = isExternalLink(processedHref, allowedHostnames);\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = secureTarget === '_blank' ? 'noopener noreferrer' : rel;\n const showExternalIcon = isExternal || secureTarget === '_blank';\n\n return {\n linkProps: {\n href: processedHref,\n target: secureTarget,\n rel: secureRel,\n },\n showExternalIcon,\n };\n}\n"],"names":[],"mappings":";;;AAoBA;;;;;;;;;AASG;AACG,SAAU,mBAAmB,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,GAAG,EACH,gBAAgB,GACW,EAAA;IAC3B,IAAI,CAAC,IAAI,EAAE;QACT,OAAO;AACL,YAAA,SAAS,EAAE;AACT,gBAAA,IAAI,EAAE,SAAS;AACf,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,GAAG,EAAE,SAAS;AACf,aAAA;AACD,YAAA,gBAAgB,EAAE,KAAK;SACxB;AACF,IAAA;AAED,IAAA,MAAM,aAAa,GAAG,qBAAqB,CAAC,IAAI,CAAC;IACjD,MAAM,UAAU,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC;AAClE,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,YAAY,KAAK,QAAQ,GAAG,qBAAqB,GAAG,GAAG;AACzE,IAAA,MAAM,gBAAgB,GAAG,UAAU,IAAI,YAAY,KAAK,QAAQ;IAEhE,OAAO;AACL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,MAAM,EAAE,YAAY;AACpB,YAAA,GAAG,EAAE,SAAS;AACf,SAAA;QACD,gBAAgB;KACjB;AACH;;;;"}
@@ -4,3 +4,4 @@ export { generateId } from './generateId';
4
4
  export { assignCssVars } from './assignCssVars';
5
5
  export { buildChannelMarkUrl } from './buildChannelMarkUrl';
6
6
  export { buildCarrierMarkUrl } from './buildCarrierMarkUrl';
7
+ export { getContextAwareLink } from './getContextAwareLink';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "14.0.5",
3
+ "version": "14.1.0",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",