@veracity/vui 0.0.1

package/index.d.ts

@@ -0,0 +1,18 @@
+export * from './box';
+export * from './button';
+export * from './core';
+export * from './heading';
+export * from './icon';
+export * from './input';
+export * from './label';
+export * from './link';
+export * from './list';
+export * from './p';
+export * from './skeleton';
+export * from './svg';
+export * from './system';
+export * from './t';
+export * from './textarea';
+export * from './theme';
+export * from './tile';
+export * from './utils';

package/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./box"), exports);
+__exportStar(require("./button"), exports);
+__exportStar(require("./core"), exports);
+__exportStar(require("./heading"), exports);
+__exportStar(require("./icon"), exports);
+__exportStar(require("./input"), exports);
+__exportStar(require("./label"), exports);
+__exportStar(require("./link"), exports);
+__exportStar(require("./list"), exports);
+__exportStar(require("./p"), exports);
+__exportStar(require("./skeleton"), exports);
+__exportStar(require("./svg"), exports);
+__exportStar(require("./system"), exports);
+__exportStar(require("./t"), exports);
+__exportStar(require("./textarea"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./tile"), exports);
+__exportStar(require("./utils"), exports);

package/input/consts.d.ts

@@ -0,0 +1,22 @@
+export declare const inputLengths: {
+    fluid: string;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const inputStates: {
+    default: {
+        colorScheme: string;
+        iconRight: string;
+    };
+    error: {
+        colorScheme: string;
+        iconRight: string;
+    };
+    success: {
+        colorScheme: string;
+        iconRight: string;
+    };
+};

package/input/consts.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputStates = exports.inputLengths = void 0;
+exports.inputLengths = {
+    fluid: 'none',
+    xs: 104,
+    sm: 160,
+    md: 240,
+    lg: 320,
+    xl: 480
+};
+exports.inputStates = {
+    default: {
+        colorScheme: 'grey',
+        iconRight: ''
+    },
+    error: {
+        colorScheme: 'red',
+        iconRight: 'falExclamationTriangle'
+    },
+    success: {
+        colorScheme: 'green',
+        iconRight: 'falCheck'
+    }
+};

package/input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './input';
+export * from './input.types';
+export { default } from './input';

package/input/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./input"), exports);
+__exportStar(require("./input.types"), exports);
+var input_1 = require("./input");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(input_1).default; } });

package/input/input.d.ts

@@ -0,0 +1,6 @@
+import { InputFieldProps, InputFieldStyleProps } from './input.types';
+export declare const BaseInputField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & InputFieldStyleProps, never>;
+export declare const InputField: import("styled-components").StyledComponent<"div", never, InputFieldProps, never>;
+export default InputField;

package/input/input.js

@@ -0,0 +1,75 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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.InputField = exports.BaseInputField = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var consts_1 = require("./consts");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+var Input = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tcolor: prussian.80;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t", "\n"], ["\n\talign-self: stretch;\n\tbackground-color: transparent;\n\tborder: none;\n\tcolor: prussian.80;\n\tflex: 1;\n\tmargin: 0 8px;\n\tmin-width: 0;\n\toutline: none;\n\tpadding: 0;\n\n\t", "\n"])), styled_components_1.compose(styled_components_1.color, styled_components_1.fontSize));
+exports.BaseInputField = styled_components_2.default.div.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t", "\n"], ["\n\talign-items: center;\n\tborder-width: 1px;\n\tdisplay: flex;\n\toutline: none;\n\ttransition: all 0s ease-in-out;\n\twidth: 100%;\n\n\t", "\n"])), generator);
+exports.InputField = core_1.forwardRef(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, className = _a.className, defaultValue = _a.defaultValue, disabled = _a.disabled, iconLeft = _a.iconLeft, iconRightProp = _a.iconRight, _b = _a.inputProps, inputProps = _b === void 0 ? {} : _b, inputRef = _a.inputRef, itemLeft = _a.itemLeft, itemRight = _a.itemRight, _c = _a.length, length = _c === void 0 ? 'fluid' : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, placeholder = _a.placeholder, readOnly = _a.readOnly, required = _a.required, _d = _a.state, state = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, value = _a.value, rest = __rest(_a, ["autoComplete", "autoFocus", "className", "defaultValue", "disabled", "iconLeft", "iconRight", "inputProps", "inputRef", "itemLeft", "itemRight", "length", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "state", "type", "value"]);
+    var _f = core_1.useStyleConfig('Input', __assign({ colorScheme: consts_1.inputStates[state].colorScheme }, props)), borderColor = _f.borderColor, focusWithinRingColor = _f.focusWithinRingColor, fontSize = _f.fontSize, iconColor = _f.iconColor, styles = __rest(_f, ["borderColor", "focusWithinRingColor", "fontSize", "iconColor"]);
+    var iconRight = iconRightProp !== null && iconRightProp !== void 0 ? iconRightProp : consts_1.inputStates[state].iconRight;
+    var placeholderColor = disabled ? 'prussian.80' : 'grey.70';
+    var aliasedProps = utils_1.filterUndefined({
+        bg: disabled || readOnly ? 'grey.20' : undefined,
+        maxW: consts_1.inputLengths[length]
+    });
+    return (react_1.default.createElement(exports.BaseInputField, __assign({ borderColor: !disabled ? borderColor : 'transparent', borderRadius: "md", className: utils_1.cs('vui-inputField', className), focusWithinBorderColor: readOnly ? borderColor : 'transparent', focusWithinRingColor: !readOnly ? focusWithinRingColor : 'transparent', px: 1, ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconLeft })),
+        react_1.default.createElement(Input, __assign({ className: "vui-input", ref: inputRef }, {
+            autoComplete: autoComplete,
+            autoFocus: autoFocus,
+            defaultValue: defaultValue,
+            disabled: disabled,
+            fontSize: fontSize,
+            name: name,
+            onBlur: onBlur,
+            onChange: onChange,
+            onFocus: onFocus,
+            placeholder: placeholder,
+            placeholderColor: placeholderColor,
+            readOnly: readOnly,
+            required: required,
+            type: type,
+            value: value
+        }, inputProps)), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { color: iconColor, icon: iconRight }))));
+});
+exports.InputField.displayName = 'InputField';
+exports.default = exports.InputField;
+var templateObject_1, templateObject_2;

package/input/input.types.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from 'react';
+import { inputLengths, inputStates } from './consts';
+import { IconProp } from '../icon';
+import { BackgroundColorProps, BordersProps, ColorProps, EffectsProps, FontSizeProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type InputFieldLength = keyof typeof inputLengths;
+export interface InputFieldProps extends HTMLAttributes<HTMLDivElement>, InputFieldStyleProps, ThemingProps<'Input'> {
+    autoComplete?: string;
+    autoFocus?: boolean;
+    colorScheme?: 'green' | 'grey' | 'red';
+    disabled?: boolean;
+    iconLeft?: IconProp;
+    iconRight?: IconProp;
+    inputProps?: InputProps;
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    itemLeft?: React.ReactNode;
+    itemRight?: React.ReactNode;
+    length?: InputFieldLength;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    state?: InputFieldState;
+    type?: string;
+    value?: number | string;
+}
+export declare type InputFieldState = keyof typeof inputStates;
+export interface InputFieldStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, SizingProps, SpaceProps, TransitionsProps {
+}
+export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'color'>, InputStyleProps {
+    color?: string;
+}
+export interface InputStyleProps extends ColorProps, FontSizeProps {
+}

package/input/input.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/input/theme.d.ts

@@ -0,0 +1,28 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    borderColor: string;
+    focusWithinRing: number;
+    focusWithinRingColor: string;
+    iconColor: string;
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    sizes: {
+        md: {
+            fontSize: string;
+            h: number;
+        };
+        lg: {
+            fontSize: string;
+            h: number;
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/input/theme.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var colors = {
+        borderColor: c + ".80",
+        focusWithinRing: 2,
+        focusWithinRingColor: c + ".80",
+        iconColor: c + ".80"
+    };
+    if (c === 'grey') {
+        colors.borderColor = c + ".60";
+        colors.focusWithinRingColor = 'blue.70';
+        colors.iconColor = 'blue.80';
+    }
+    return colors;
+}
+var defaultProps = {
+    colorScheme: 'grey',
+    size: 'md',
+    variant: 'default'
+};
+var sizes = {
+    md: {
+        fontSize: 'md',
+        h: 40
+    },
+    lg: {
+        fontSize: 'lg',
+        h: 48
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/label/index.d.ts

@@ -0,0 +1,3 @@
+export * from './label';
+export * from './label.types';
+export { default } from './label';

package/label/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./label"), exports);
+__exportStar(require("./label.types"), exports);
+var label_1 = require("./label");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(label_1).default; } });

package/label/label.d.ts

@@ -0,0 +1,6 @@
+import { LabelProps, LabelStyleProps } from './label.types';
+export declare const BaseLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & LabelStyleProps, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", never, LabelProps, never>;
+export default Label;

package/label/label.js

@@ -0,0 +1,78 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __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.Label = exports.BaseLabel = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var system_1 = require("../system");
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.interactivity, system_1.isTruncated, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
+var Text = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.isTruncated);
+exports.BaseLabel = styled_components_2.default.span.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: center;\n\tline-height: 1.1;\n\tmin-width: 0px;\n\tposition: relative;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t", "\n"])), generator);
+exports.Label = core_1.forwardRef(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), casing = _a.casing, children = _a.children, className = _a.className, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, isElevated = _a.isElevated, isFullWidth = _a.isFullWidth, _b = _a.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isLoading = _a.isLoading, isRound = _a.isRound, isSplit = _a.isSplit, _c = _a.isTruncated, isTruncated = _c === void 0 ? true : _c, itemLeft = _a.itemLeft, itemRight = _a.itemRight, text = _a.text, weight = _a.weight, rest = __rest(_a, ["casing", "children", "className", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isInteractive", "isLoading", "isRound", "isSplit", "isTruncated", "itemLeft", "itemRight", "text", "weight"]);
+    var _d = core_1.useStyleConfig('Label', props), activeBg = _d.activeBg, h = _d.h, hoverBg = _d.hoverBg, _e = _d.iconSize, iconSize = _e === void 0 ? 'md' : _e, _f = _d.spaceX, spaceXBase = _f === void 0 ? 0 : _f, styles = __rest(_d, ["activeBg", "h", "hoverBg", "iconSize", "spaceX"]);
+    var spaceX = spaceXBase / 8;
+    var spaceXText = (spaceXBase + 4) / 8;
+    var iconRightMl = isSplit ? 'auto' : spaceX;
+    var pl = icon || itemLeft || iconLeft ? spaceX : spaceXText;
+    var pr = icon || itemRight || iconRight ? spaceX : spaceXText;
+    var interactiveProps = isInteractive
+        ? {
+            cursor: 'pointer',
+            hoverBg: hoverBg,
+            activeBg: activeBg,
+            focusRing: 3,
+            focusRingColor: 'blue.50',
+            tabIndex: 0,
+            userSelect: 'none'
+        }
+        : {};
+    var aliasedProps = utils_1.filterUndefined({
+        borderRadius: isRound ? h / 2 : undefined,
+        boxShadow: isElevated ? 2 : undefined,
+        fontWeight: weight,
+        pointerEvents: isLoading ? 'none' : undefined,
+        textTransform: casing,
+        w: isFullWidth ? '100%' : undefined
+    });
+    return (react_1.default.createElement(exports.BaseLabel, __assign({ borderRadius: "md", className: utils_1.cs('vui-label', className), fontWeight: "medium", h: h, pl: pl, pr: pr, ref: ref, transitionDuration: "fast" }, styles, interactiveProps, aliasedProps, rest), icon ? (react_1.default.createElement(icon_1.default, { icon: icon, size: iconSize })) : (react_1.default.createElement(react_1.default.Fragment, null, itemLeft !== null && itemLeft !== void 0 ? itemLeft : (iconLeft && react_1.default.createElement(icon_1.default, { icon: iconLeft, mr: spaceX, size: iconSize })),
+        react_1.default.createElement(Text, { isTruncated: isTruncated }, children !== null && children !== void 0 ? children : text), itemRight !== null && itemRight !== void 0 ? itemRight : (iconRight && react_1.default.createElement(icon_1.default, { icon: iconRight, ml: iconRightMl, size: iconSize })),
+        isLoading && react_1.default.createElement(icon_1.default, { animation: "spin", icon: "falSpinner", ml: iconRightMl, size: iconSize })))));
+});
+exports.Label.displayName = 'Label';
+exports.default = exports.Label;
+var templateObject_1, templateObject_2;

package/label/label.types.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { IconProp } from '../icon';
+import { BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface LabelProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>, LabelStyleProps, ThemingProps<'Label'> {
+    casing?: TypographyProps['textTransform'];
+    colorScheme?: 'blue' | 'green' | 'grey' | 'prussian' | 'red' | 'yellow';
+    icon?: IconProp;
+    iconLeft?: IconProp;
+    iconRight?: IconProp;
+    isElevated?: boolean;
+    isFullWidth?: boolean;
+    isInteractive?: boolean;
+    isLoading?: boolean;
+    isRound?: boolean;
+    isSplit?: boolean;
+    itemLeft?: React.ReactNode;
+    itemRight?: React.ReactNode;
+    text?: string;
+    weight?: TypographyProps['fontWeight'];
+}
+export interface LabelStyleProps extends BackgroundColorProps, BordersProps, EffectsProps, InteractivityProps, IsTruncatedProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+}

package/label/label.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/label/theme.d.ts

@@ -0,0 +1,45 @@
+import { Dict } from '../utils';
+declare function variantSolid(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
+declare function variantSubtle(props: Dict): {
+    hoverBg: string;
+    activeBg: string;
+    bg: string;
+    color: string;
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    sizes: {
+        sm: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+            spaceX: number;
+        };
+        md: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+            spaceX: number;
+        };
+        lg: {
+            fontSize: string;
+            h: number;
+            iconSize: string;
+            spaceX: number;
+        };
+    };
+    variants: {
+        solid: typeof variantSolid;
+        subtle: typeof variantSubtle;
+    };
+};
+export default _default;

package/label/theme.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantSolid(props) {
+    var c = props.colorScheme;
+    var colors = {
+        hoverBg: c + ".90",
+        activeBg: c + ".100",
+        bg: c + ".80",
+        color: 'white'
+    };
+    if (c === 'yellow') {
+        colors.hoverBg = c + ".80";
+        colors.activeBg = c + ".90";
+        colors.bg = c + ".70";
+    }
+    return colors;
+}
+function variantSubtle(props) {
+    var c = props.colorScheme;
+    var colors = {
+        hoverBg: c + ".30",
+        activeBg: c + ".40",
+        bg: c + ".20",
+        color: c + ".80"
+    };
+    // Special cases
+    if (c === 'green') {
+        colors.color = c + ".90";
+    }
+    if (c === 'grey') {
+        colors.color = "prussian.80";
+    }
+    if (c === 'red') {
+        colors.color = c + ".90";
+    }
+    if (c === 'yellow') {
+        colors.color = c + ".100";
+    }
+    return colors;
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'subtle'
+};
+var sizes = {
+    sm: {
+        fontSize: 'sm',
+        h: 24,
+        iconSize: 'xs',
+        spaceX: 4
+    },
+    md: {
+        fontSize: 'sm',
+        h: 32,
+        iconSize: 'sm',
+        spaceX: 6
+    },
+    lg: {
+        fontSize: 'md',
+        h: 40,
+        iconSize: 'md',
+        spaceX: 8
+    }
+};
+var variants = {
+    solid: variantSolid,
+    subtle: variantSubtle
+};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/link/index.d.ts

@@ -0,0 +1,3 @@
+export * from './link';
+export * from './link.types';
+export { default } from './link';

package/link/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./link"), exports);
+__exportStar(require("./link.types"), exports);
+var link_1 = require("./link");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(link_1).default; } });

package/link/link.d.ts

@@ -0,0 +1,6 @@
+import { LinkProps, LinkStyleProps } from './link.types';
+export declare const BaseLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & LinkStyleProps, never>;
+export declare const Link: import("styled-components").StyledComponent<"a", never, LinkProps, never>;
+export default Link;