@auth0/quantum-product 1.5.1

package/input/input-base-overrides.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMuiInputBaseOverrides = void 0;
+var InputBase_1 = require("@mui/material/InputBase");
+var createMuiInputBaseOverrides = function (_a) {
+    var _b;
+    var spacing = _a.spacing, typography = _a.typography, tokens = _a.tokens;
+    return {
+        defaultProps: {
+            color: 'primary',
+        },
+        styleOverrides: {
+            root: __assign(__assign({}, typography.input), (_b = {}, _b["&.".concat(InputBase_1.inputBaseClasses.disabled)] = {
+                backgroundColor: tokens.color_bg_input_disabled,
+                color: tokens.color_fg_disabled,
+            }, _b)),
+            inputMultiline: __assign({}, typography.body2),
+            input: {
+                // use line height and padding for height
+                height: 'unset',
+                padding: spacing(1.125, 2),
+            },
+            sizeSmall: {
+                margin: 0,
+            },
+            inputSizeSmall: {
+                paddingTop: 5,
+                paddingBottom: 5,
+            },
+        },
+    };
+};
+exports.createMuiInputBaseOverrides = createMuiInputBaseOverrides;

package/input/input-label/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { InputLabelProps } from '@mui/material/InputLabel';
+export { default as InputLabel } from '@mui/material/InputLabel';
+export interface IInputLabelProps extends InputLabelProps {
+    component?: React.ElementType;
+}

package/input/input-label/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputLabel = void 0;
+var InputLabel_1 = require("@mui/material/InputLabel");
+Object.defineProperty(exports, "InputLabel", { enumerable: true, get: function () { return __importDefault(InputLabel_1).default; } });

package/input/input-label/input-label-overrides.d.ts

@@ -0,0 +1,3 @@
+import type { InputLabelProps, InputLabelClassKey } from '@mui/material/InputLabel';
+import type { ComponentOverrideCreator } from '../../theme/create-component-overrides';
+export declare const createMuiInputLabelOverrides: ComponentOverrideCreator<InputLabelProps, InputLabelClassKey>;

package/input/input-label/input-label-overrides.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMuiInputLabelOverrides = void 0;
+var InputLabel_1 = require("@mui/material/InputLabel");
+var createMuiInputLabelOverrides = function (_a) {
+    var _b;
+    var spacing = _a.spacing, tokens = _a.tokens;
+    return {
+        defaultProps: {
+            shrink: true,
+            variant: 'outlined',
+        },
+        styleOverrides: {
+            formControl: {
+                position: 'static',
+            },
+            outlined: (_b = {
+                    marginBottom: spacing(1)
+                },
+                _b["&.".concat(InputLabel_1.inputLabelClasses.shrink)] = {
+                    transform: 'none',
+                },
+                _b),
+            asterisk: {
+                color: tokens.color_fg_state_danger,
+            },
+        },
+    };
+};
+exports.createMuiInputLabelOverrides = createMuiInputLabelOverrides;

package/input/input.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { OutlinedInputProps } from '@mui/material/OutlinedInput';
+import { IStyledOwnerStateProps } from '../styled';
+export interface IInputProps extends Omit<OutlinedInputProps, 'variant' | 'notched' | 'labelWidth' | 'color'> {
+    min?: number;
+    max?: number;
+    code?: boolean;
+    actions?: React.ReactNode[];
+    icon?: React.ReactNode;
+    /** Hide input similar to passwords but for other private information. Implies readOnly. */
+    masked?: boolean;
+    readOnly?: boolean;
+    size?: 'small' | 'medium';
+    suffix?: React.ReactNode;
+}
+export declare type IMaskedInputProps = Pick<IInputProps, 'disabled' | 'placeholder' | 'defaultValue' | 'value'>;
+export declare const getMaskedInputProps: (masked: boolean | undefined, inputProps: Pick<IInputProps, 'masked' | 'value' | 'defaultValue'>) => IMaskedInputProps;
+export declare const Root: import("styled-components").StyledComponent<((props: OutlinedInputProps) => JSX.Element) & {
+    muiName: string;
+}, import("@mui/material").Theme, import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & IStyledOwnerStateProps<{
+    code?: boolean | undefined;
+}>, never>;
+export declare const Input: React.ForwardRefExoticComponent<Pick<IInputProps, "code" | "label" | "slot" | "style" | "title" | "type" | "error" | "disabled" | "hidden" | "size" | "icon" | "translate" | "margin" | "className" | "classes" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "fullWidth" | "endAdornment" | "components" | "componentsProps" | "max" | "autoFocus" | "name" | "value" | "required" | "multiline" | "autoComplete" | "disableInjectingGlobalStyles" | "inputComponent" | "inputProps" | "inputRef" | "readOnly" | "renderSuffix" | "rows" | "maxRows" | "minRows" | "startAdornment" | "min" | "actions" | "masked" | "suffix"> & React.RefAttributes<unknown>>;

package/input/input.js

@@ -0,0 +1,84 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = exports.Root = exports.getMaskedInputProps = void 0;
+var React = __importStar(require("react"));
+var OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
+var input_actions_1 = require("./input-actions");
+var input_adornment_1 = require("./input-adornment");
+var styled_1 = require("../styled");
+var getMaskedInputProps = function (masked, inputProps) {
+    var maskedProps = {};
+    if (masked) {
+        var maskedValueKey = inputProps.value ? 'value' : 'defaultValue';
+        var length_1 = inputProps[maskedValueKey] ? String(inputProps[maskedValueKey]).length : 8;
+        maskedProps.placeholder = new Array(length_1 + 1).join('•');
+        maskedProps.disabled = true;
+        maskedProps[maskedValueKey] = '';
+    }
+    return maskedProps;
+};
+exports.getMaskedInputProps = getMaskedInputProps;
+exports.Root = (0, styled_1.styled)(OutlinedInput_1.default, { slot: 'Root', name: 'QuantumInput' })(function (_a) {
+    var theme = _a.theme, multiline = _a.multiline, ownerState = _a.ownerState;
+    return __assign({}, (ownerState.code && __assign(__assign({}, theme.typography.code1), { lineHeight: !multiline ? theme.typography.input.lineHeight : undefined })));
+});
+exports.Input = React.forwardRef(function (props, ref) {
+    var actions = props.actions, icon = props.icon, code = props.code, masked = props.masked, multiline = props.multiline, _a = props.inputProps, inputPropsProp = _a === void 0 ? {} : _a, min = props.min, max = props.max, readOnly = props.readOnly, disabled = props.disabled, size = props.size, margin = props.margin, suffix = props.suffix, endAdornmentProp = props.endAdornment, startAdornmentProp = props.startAdornment, 
+    // remove to prevent passing through to the root
+    propClasses = props.classes, rootProps = __rest(props, ["actions", "icon", "code", "masked", "multiline", "inputProps", "min", "max", "readOnly", "disabled", "size", "margin", "suffix", "endAdornment", "startAdornment", "classes"]);
+    var endAdornment = endAdornmentProp ||
+        (actions && React.createElement(input_actions_1.InputActions, { multiline: multiline, actions: actions })) ||
+        (suffix && React.createElement(input_adornment_1.InputAdornment, { position: "end" }, suffix));
+    var startAdornment = startAdornmentProp || (icon && React.createElement(input_adornment_1.InputAdornment, { position: "start" }, icon));
+    var maskedProps = (0, exports.getMaskedInputProps)(masked, rootProps);
+    var inputProps = __assign({ min: min, max: max, readOnly: readOnly }, inputPropsProp);
+    return (React.createElement(exports.Root, __assign({ ownerState: { code: code }, size: size, disabled: disabled || readOnly, multiline: multiline, endAdornment: endAdornment, startAdornment: startAdornment, inputProps: inputProps }, rootProps, maskedProps, { ref: ref })));
+});

package/input/outlined-input-overrides.d.ts

@@ -0,0 +1,3 @@
+import type { OutlinedInputProps, OutlinedInputClassKey } from '@mui/material/OutlinedInput';
+import type { ComponentOverrideCreator } from '../theme/create-component-overrides';
+export declare const createMuiOutlinedInputOverrides: ComponentOverrideCreator<OutlinedInputProps, OutlinedInputClassKey>;

package/input/outlined-input-overrides.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMuiOutlinedInputOverrides = void 0;
+var OutlinedInput_1 = require("@mui/material/OutlinedInput");
+var createMuiOutlinedInputOverrides = function (_a) {
+    var _b, _c, _d, _e;
+    var spacing = _a.spacing, transitions = _a.transitions, mixins = _a.mixins, tokens = _a.tokens;
+    return {
+        defaultProps: {
+            color: 'primary',
+            fullWidth: false,
+            notched: false,
+        },
+        styleOverrides: {
+            root: (_b = {
+                    backgroundColor: tokens.color_bg_input
+                },
+                _b["& .".concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_input,
+                },
+                _b["&.".concat(OutlinedInput_1.outlinedInputClasses.disabled)] = (_c = {},
+                    _c["& .".concat(OutlinedInput_1.outlinedInputClasses.notchedOutline, ", &:hover .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
+                        borderColor: tokens.color_border_input_disabled,
+                    },
+                    _c["&.".concat(OutlinedInput_1.outlinedInputClasses.error, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
+                        borderColor: tokens.color_border_state_danger,
+                    },
+                    _c),
+                _b["&:hover .".concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_input_hover,
+                },
+                _b["&.".concat(OutlinedInput_1.outlinedInputClasses.focused, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = __assign({ borderWidth: 2 }, mixins.focusRing()),
+                _b["&.".concat(OutlinedInput_1.outlinedInputClasses.focused, ":hover .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
+                _b["&.".concat(OutlinedInput_1.outlinedInputClasses.error, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_state_danger,
+                    borderWidth: 2,
+                },
+                _b["&.".concat(OutlinedInput_1.outlinedInputClasses.error, "&.").concat(OutlinedInput_1.outlinedInputClasses.focused, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_state_danger }, mixins.focusRing({ color: tokens.color_border_focus_state_danger })),
+                _b),
+            notchedOutline: {
+                top: 0,
+                transition: transitions.create(['box-shadow', 'border-color', 'border-width'], {
+                    duration: transitions.duration.shortest,
+                }),
+                '& legend': {
+                    display: 'none',
+                },
+            },
+            input: {
+                padding: spacing(1.125, 2),
+            },
+            multiline: (_d = {
+                    padding: 0
+                },
+                _d["&.".concat(OutlinedInput_1.outlinedInputClasses.adornedEnd)] = {
+                    // resetting the default
+                    paddingRight: 14,
+                },
+                _d),
+            inputMultiline: (_e = {
+                    padding: spacing(1, 2)
+                },
+                _e["&.".concat(OutlinedInput_1.outlinedInputClasses.inputAdornedEnd)] = {
+                    // resetting the default
+                    paddingRight: spacing(1),
+                },
+                _e),
+            inputSizeSmall: {
+                paddingTop: spacing(0.75),
+                paddingBottom: spacing(0.75),
+                paddingLeft: spacing(1.5),
+                paddingRight: spacing(1.5),
+                "&[type='number']": {
+                    paddingRight: spacing(0.5),
+                },
+            },
+            inputAdornedStart: {
+                paddingLeft: 0,
+            },
+        },
+    };
+};
+exports.createMuiOutlinedInputOverrides = createMuiOutlinedInputOverrides;

package/label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from './label';
+export type { ILabelProps } from './label';

package/label/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+var label_1 = require("./label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return label_1.Label; } });

package/label/label.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IStyledComponentProps } from '../styled';
+export declare const labelComponentName: "QuantumLabel";
+export interface ILabelComponentProps {
+    color?: 'default' | 'primary' | 'warning' | 'danger' | 'success' | 'info';
+    variant?: 'default' | 'outlined' | 'filled';
+}
+export declare type ILabelProps = IStyledComponentProps<{
+    props: ILabelComponentProps;
+    defaultComponent: 'span';
+}>;
+export declare const Label: React.ForwardRefExoticComponent<ILabelProps & React.RefAttributes<HTMLSpanElement>>;

package/label/label.js

@@ -0,0 +1,72 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.labelComponentName = void 0;
+var styled_1 = require("../styled");
+exports.labelComponentName = 'QuantumLabel';
+exports.Label = (0, styled_1.styled)('span', {
+    name: exports.labelComponentName,
+    slot: 'Root',
+    shouldForwardProp: function (prop) { return (0, styled_1.rootShouldForwardProp)(prop) && prop !== 'color' && prop !== 'variant'; },
+})(function (_a) {
+    var theme = _a.theme, _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
+    return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
+        background: theme.tokens.color_bg_state_neutral_subtle,
+        color: theme.tokens.color_fg_on_state_neutral_subtle,
+    })), (color === 'primary' && {
+        background: theme.tokens.color_bg_brand_primary_subtle,
+        color: theme.tokens.color_fg_on_brand_primary_subtle,
+    })), (color === 'info' && {
+        background: theme.tokens.color_bg_state_info_subtle,
+        color: theme.tokens.color_fg_on_state_info_subtle,
+    })), (color === 'warning' && {
+        background: theme.tokens.color_bg_state_caution_subtle,
+        color: theme.tokens.color_fg_on_state_caution_subtle,
+    })), (color === 'success' && {
+        background: theme.tokens.color_bg_state_success_subtle,
+        color: theme.tokens.color_fg_on_state_success_subtle,
+    })), (color === 'danger' && {
+        background: theme.tokens.color_bg_state_danger_subtle,
+        color: theme.tokens.color_fg_on_state_danger_subtle,
+    })))), (variant === 'outlined' && __assign(__assign(__assign(__assign(__assign({ backgroundColor: 'transparent', color: theme.tokens.color_fg_state_neutral, boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_state_neutral) }, (color === 'primary' && {
+        boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_brand_primary),
+        color: theme.tokens.color_fg_brand_primary,
+    })), (color === 'info' && {
+        boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_state_info),
+        color: theme.tokens.color_fg_state_info,
+    })), (color === 'warning' && {
+        boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_state_caution),
+        color: theme.tokens.color_fg_state_caution,
+    })), (color === 'success' && {
+        boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_state_success),
+        color: theme.tokens.color_fg_state_success,
+    })), (color === 'danger' && {
+        boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_state_danger),
+        color: theme.tokens.color_fg_state_danger,
+    })))), (variant === 'filled' && __assign(__assign(__assign(__assign(__assign({ backgroundColor: theme.tokens.color_bg_state_neutral, color: theme.tokens.color_fg_on_state_neutral }, (color === 'primary' && {
+        backgroundColor: theme.tokens.color_bg_brand_primary,
+        color: theme.tokens.color_fg_on_brand_primary,
+    })), (color === 'info' && {
+        backgroundColor: theme.tokens.color_bg_state_info,
+        color: theme.tokens.color_fg_on_state_info,
+    })), (color === 'warning' && {
+        backgroundColor: theme.tokens.color_bg_state_caution,
+        color: theme.tokens.color_fg_on_state_caution,
+    })), (color === 'success' && {
+        backgroundColor: theme.tokens.color_bg_state_success,
+        color: theme.tokens.color_fg_on_state_success,
+    })), (color === 'danger' && {
+        backgroundColor: theme.tokens.color_bg_state_danger,
+        color: theme.tokens.color_fg_on_state_danger,
+    })))));
+});

package/link/index.d.ts

@@ -0,0 +1,3 @@
+export { Link } from './link';
+export type { ILinkProps } from './link';
+export { linkClasses } from './link-classes';

package/link/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linkClasses = exports.Link = void 0;
+var link_1 = require("./link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return link_1.Link; } });
+var link_classes_1 = require("./link-classes");
+Object.defineProperty(exports, "linkClasses", { enumerable: true, get: function () { return link_classes_1.linkClasses; } });

package/link/link-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const linkComponentName: "QuantumLink";
+export declare function getLinkUtilityClass(slot: string): string;
+export declare const linkClasses: Record<"icon" | "root" | "endIcon" | "startIcon", string>;
+export declare type LinkClasses = typeof linkClasses;
+export declare type LinkClassKey = keyof LinkClasses;

package/link/link-classes.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linkClasses = exports.getLinkUtilityClass = exports.linkComponentName = void 0;
+var classes_1 = require("../styles/classes");
+exports.linkComponentName = 'QuantumLink';
+function getLinkUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.linkComponentName, slot);
+}
+exports.getLinkUtilityClass = getLinkUtilityClass;
+exports.linkClasses = (0, classes_1.generateUtilityClasses)(exports.linkComponentName, ['root', 'icon', 'startIcon', 'endIcon']);

package/link/link.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps, OverridableTypeMap } from '../overridable-component';
+import { IStyledCommonProps } from '../styled';
+import { ITextProps } from '../text';
+import { LinkClasses } from './link-classes';
+export declare type LinkColorType = 'primary' | 'textSecondary' | 'textPrimary' | 'inherit' | 'danger';
+export interface ILinkTypeMap<P = {}, D extends React.ElementType = 'a'> {
+    props: P & IStyledCommonProps & {
+        /**
+         * The content of the component.
+         */
+        children?: React.ReactNode;
+        /**
+         * Override or extend the styles applied to the component.
+         */
+        classes?: Partial<LinkClasses>;
+        /**
+         * The color of the link.
+         * @default 'primary'
+         */
+        color?: LinkColorType;
+        /**
+         * The component used for the root node.
+         * Either a string to use a HTML element or a component.
+         * @default 'a'
+         */
+        component?: React.ElementType;
+        /**
+         * icon to display at the start of the link
+         */
+        endIcon?: React.ReactElement;
+        noWrap?: ITextProps['noWrap'];
+        /**
+         * Applies the theme typography styles.
+         * @default 'inherit'
+         */
+        variant?: ITextProps['variant'];
+        /**
+         * icon to display at the end of the link
+         */
+        startIcon?: React.ReactElement;
+        /**
+         * Applies underline styles
+         * @default 'none'
+         */
+        underline?: 'none' | 'hover';
+    };
+    defaultComponent: D;
+}
+export interface IExtendLinkTypeMap<M extends OverridableTypeMap> {
+    props: M['props'] & (M['props'] extends {
+        classes?: Record<string, string>;
+    } ? Omit<ILinkTypeMap['props'], 'classes'> : ILinkTypeMap['props']);
+    defaultComponent: M['defaultComponent'];
+}
+export declare type ExtendLink<M extends OverridableTypeMap> = ((props: OverrideProps<IExtendLinkTypeMap<M>, 'a'>) => JSX.Element) & OverridableComponent<IExtendLinkTypeMap<M>>;
+export declare type ILinkProps<D extends React.ElementType = ILinkTypeMap['defaultComponent'], P = {}> = OverrideProps<ILinkTypeMap<P, D>, D>;
+export declare const Link: OverridableComponent<ILinkTypeMap<{}, "a">>;