@openfin/ui-library 0.1.1 → 0.1.2-alpha.1616610935

package/dist/components/controls/Toggle/toggle.js

@@ -18,7 +18,7 @@ exports.Toggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Input_1 = require("../../input/Input");
+const RawInput_1 = require("../../input/RawInput");
 const Box_1 = require("../../layout/Box");
 const Toggle = (_a) => {
     var { id, label, labelSide = 'right', type = 'checkbox', onChange = () => { } } = _a, inputProps = __rest(_a, ["id", "label", "labelSide", "type", "onChange"]);
@@ -49,7 +49,8 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   border-radius: calc(0.5 * var(--px-toggle));
 
   background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
-  transition: background var(--global-transition);
+  transition: background var(--global-transition),
+    border-color var(--global-transition);
 
   &:focus-within {
     border-color: ${({ theme }) => theme.palette.inputFocused};
@@ -69,7 +70,7 @@ const ToggleKnob = styled_components_1.default.button `
   transition: left var(--global-transition);
   pointer-events: none; /* Allow pass-thru for native input */
 `;
-const ToggleInput = styled_components_1.default(Input_1.Input) `
+const ToggleInput = styled_components_1.default(RawInput_1.RawInput) `
   position: absolute;
   top: 0;
   left: 0;

package/dist/components/elements/Icon/openfin/BellIcon.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '@modulz/radix-icons/dist/types';
+/**
+ * OVERRIDE!
+ * This replaces Radix UI BellIcon
+ */
+export declare const BellIcon: ({ color, ...props }: IconProps) => JSX.Element;

package/dist/components/elements/Icon/openfin/BellIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BellIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OVERRIDE!
+ * This replaces Radix UI BellIcon
+ */
+const BellIcon = (_a) => {
+    var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx_runtime_1.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.47306 1.22943C6.5193 1.22943 5.87291 1.98399 5.65371 2.72697C5.65207 2.72932 5.64921 2.73303 5.64485 2.73756C5.6392 2.74342 5.63264 2.74896 5.62599 2.75355C5.61926 2.75819 5.61452 2.7604 5.613 2.76102L5.61265 2.76117C5.05088 2.99251 4.39193 3.36022 3.87697 4.03357C3.35815 4.71196 3.01949 5.65571 3.01945 6.97749L5.65371 2.72697L3.01945 6.97776C3.01866 8.30165 2.87871 9.0313 2.67091 9.53439C2.48879 9.97531 2.24889 10.2658 1.912 10.6738L1.91185 10.674C1.86263 10.7336 1.81135 10.7957 1.75787 10.8612C1.14923 11.606 1.72729 12.6419 2.65986 12.6419H5.09019C5.21191 12.98 5.40726 13.2906 5.66618 13.5495C6.12827 14.0116 6.75499 14.2712 7.40848 14.2712C8.06197 14.2712 8.6887 14.0116 9.15078 13.5495C9.40971 13.2906 9.60505 12.98 9.72678 12.6419H12.2894C13.2234 12.6419 13.792 11.6008 13.1884 10.8613L13.1883 10.8612C13.1348 10.7957 13.0835 10.7336 13.0342 10.674C12.6973 10.2659 12.4574 9.9754 12.2755 9.53451C12.0678 9.03147 11.9282 8.30182 11.9282 6.97776C11.9282 5.65688 11.5891 4.71299 11.0703 4.03433C10.5553 3.36075 9.89652 2.99234 9.33499 2.76115L9.33467 2.76102C9.33409 2.76079 9.32982 2.75888 9.32313 2.75424C9.31655 2.74967 9.30981 2.74394 9.30382 2.7377C9.29875 2.73241 9.29545 2.72803 9.29363 2.72531C9.07264 1.98378 8.42691 1.22943 7.47306 1.22943ZM8.68654 12.6419H6.13042C6.1876 12.7295 6.25403 12.8115 6.3291 12.8866C6.61537 13.1729 7.00363 13.3337 7.40848 13.3337C7.81333 13.3337 8.2016 13.1729 8.48787 12.8866C8.56293 12.8115 8.62937 12.7295 8.68654 12.6419ZM6.55145 2.99716C6.69571 2.50085 7.07121 2.16693 7.47306 2.16693C7.87492 2.16693 8.2505 2.50061 8.3966 2.99785L8.39695 2.99904C8.48499 3.29575 8.72843 3.52538 8.97809 3.62806C9.45625 3.82492 9.94894 4.11119 10.3255 4.60373C10.6982 5.09119 10.9907 5.82486 10.9907 6.97776C10.9907 8.35506 11.1337 9.2255 11.4089 9.89217C11.6483 10.4723 11.9823 10.8749 12.3167 11.278C12.3653 11.3366 12.4139 11.3951 12.4622 11.4542C12.5016 11.5025 12.5046 11.5552 12.4793 11.605C12.4553 11.6524 12.3996 11.7044 12.2894 11.7044H2.65986C2.54604 11.7044 2.48955 11.6509 2.46588 11.6045C2.44119 11.5562 2.44325 11.504 2.4838 11.4544L2.48383 11.4544C2.53215 11.3952 2.58075 11.3366 2.62934 11.2781L2.62946 11.2779C2.96389 10.8748 3.29785 10.4723 3.5374 9.89229C3.81273 9.22571 3.95615 8.35533 3.95695 6.97803V6.97776C3.95695 5.82341 4.24928 5.08999 4.62165 4.60309C4.99792 4.1111 5.49044 3.82537 5.96963 3.62805C6.21661 3.52645 6.46257 3.30002 6.55111 2.99833L6.55145 2.99716Z", fill: color }, void 0) }), void 0));
+};
+exports.BellIcon = BellIcon;

package/dist/components/elements/Icon/openfin/OpenFinIcon.d.ts

@@ -1,2 +1,5 @@
 import { IconProps } from '@modulz/radix-icons/dist/types';
+/**
+ * OpenFin Icon
+ */
 export declare const OpenFinIcon: ({ color, ...props }: IconProps) => JSX.Element;

package/dist/components/elements/Icon/openfin/OpenFinIcon.js

@@ -13,6 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenFinIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OpenFin Icon
+ */
 const OpenFinIcon = (_a) => {
     var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
     return (jsx_runtime_1.jsx("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx_runtime_1.jsx("path", { d: "M14.2685 5.73916C14.1785 5.64906 14.0817 5.56592 13.979 5.49047L13.9412 5.46429C13.9196 5.44919 13.8984 5.43358 13.8763 5.41898C13.8541 5.40438 13.8284 5.38878 13.8048 5.37418L13.7715 5.35354C13.7418 5.33592 13.7116 5.3193 13.6814 5.30319L13.6638 5.29363C13.3065 5.10618 12.9091 5.00807 12.5057 5.00768C11.8417 5.00715 11.2052 4.74291 10.7362 4.2731C10.2671 3.8033 10.004 3.16642 10.0046 2.50262C10.0065 1.49222 9.39933 0.580219 8.46634 0.191911C7.53335 -0.196397 6.45826 0.015466 5.74244 0.728701C5.02661 1.44194 4.81103 2.51607 5.19621 3.4502C5.5814 4.38433 6.4915 4.99447 7.5021 4.9961C8.16603 4.99664 8.80256 5.26088 9.27161 5.73068C9.74066 6.20049 10.0038 6.83736 10.0031 7.50117C10.0026 8.16497 9.7383 8.80137 9.2684 9.27032C8.7985 9.73928 8.1615 10.0024 7.49756 10.0017C6.83413 10.0022 6.19772 9.73894 5.72865 9.26987C5.25958 8.8008 4.99636 8.16447 4.99703 7.50117C4.99703 6.12155 3.87841 5.00315 2.49852 5.00315C1.11862 5.00315 0 6.12155 0 7.50117C0 8.88078 1.11862 9.99918 2.49852 9.99918C3.87841 9.99918 4.99703 11.1176 4.99703 12.4972C4.99703 13.8795 6.1178 15 7.50033 15C8.88287 15 10.0036 13.8795 10.0036 12.4972C10.0036 11.1176 11.1223 9.99918 12.5021 9.99918C12.9482 9.99948 13.3862 9.88022 13.7705 9.65383C13.8038 9.6342 13.8365 9.61356 13.8712 9.59241L13.8783 9.58788C13.9085 9.56775 13.9387 9.5466 13.9679 9.52546L13.981 9.5164C14.0072 9.49727 14.0314 9.47662 14.0591 9.45598L14.0812 9.43887C14.1054 9.41923 14.1286 9.39859 14.1522 9.37795L14.1779 9.3558C14.2081 9.32862 14.2378 9.30042 14.267 9.27123L14.2716 9.2672C14.3794 9.15887 14.4772 9.04091 14.5636 8.9148C14.5824 8.88761 14.6005 8.86009 14.618 8.83223C15.237 7.84584 15.092 6.56267 14.2685 5.73916Z", fill: color }, void 0) }), void 0));

package/dist/components/elements/Icon/openfin/WorkspaceIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from '@modulz/radix-icons/dist/types';
+/**
+ * OpenFin Workspace Icon
+ */
+export declare const WorkspaceIcon: ({ color, ...props }: IconProps) => JSX.Element;

package/dist/components/elements/Icon/openfin/WorkspaceIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * OpenFin Workspace Icon
+ */
+const WorkspaceIcon = (_a) => {
+    var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
+    return (jsx_runtime_1.jsxs("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx_runtime_1.jsx("rect", { x: "0.000244141", y: "0.00012207", width: "7.49997", height: "8.74997", rx: "1.16071", fill: color }, void 0),
+            jsx_runtime_1.jsx("rect", { x: "9.33048", y: "5.58035", width: "6.33926", height: "8.83925", rx: "0.580355", stroke: color, strokeWidth: "1.16071" }, void 0),
+            jsx_runtime_1.jsx("rect", { x: "8.75012", width: "7.49997", height: "3.74999", rx: "1.16071", fill: color }, void 0),
+            jsx_runtime_1.jsx("rect", { y: "10", width: "7.49997", height: "4.99998", rx: "1.16071", fill: color }, void 0)] }), void 0));
+};
+exports.WorkspaceIcon = WorkspaceIcon;

package/dist/components/elements/Icon/openfin/index.d.ts

@@ -1 +1,3 @@
 export * from './OpenFinIcon';
+export * from './BellIcon';
+export * from './WorkspaceIcon';

package/dist/components/elements/Icon/openfin/index.js

@@ -11,3 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./OpenFinIcon"), exports);
+__exportStar(require("./BellIcon"), exports);
+__exportStar(require("./WorkspaceIcon"), exports);

package/dist/components/input/RawInput/index.d.ts

@@ -0,0 +1 @@
+export * from './rawInput';

package/dist/components/input/{Input → RawInput}/index.js

@@ -10,4 +10,4 @@ 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("./input"), exports);
+__exportStar(require("./rawInput"), exports);

package/dist/components/input/RawInput/rawInput.d.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+export declare type RawInputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Unstyled input extended by other components
+ */
+export declare const RawInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/input/{Input/input.js → RawInput/rawInput.js}

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
+exports.RawInput = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 /**
- * Unstyled Input extended by other components
+ * Unstyled input extended by other components
  */
-exports.Input = styled_components_1.default.input ``;
-exports.Input.displayName = 'Input';
+exports.RawInput = styled_components_1.default.input ``;
+exports.RawInput.displayName = 'RawInput';

package/dist/components/input/TextInput/textInput.d.ts

@@ -1,3 +1,6 @@
 import { FC, InputHTMLAttributes } from 'react';
-export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
-export declare const TextInput: import("styled-components").StyledComponent<FC<TextInputProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    message?: string;
+    label?: string;
+};
+export declare const TextInput: FC;

package/dist/components/input/TextInput/textInput.js

@@ -17,14 +17,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Input_1 = require("../Input");
-const TextInputInner = (_a) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (jsx_runtime_1.jsx(Input_1.Input, Object.assign({ className: className, type: "text" }, rest), void 0));
-};
-exports.TextInput = styled_components_1.default(TextInputInner) `
+const RawInput_1 = require("../RawInput");
+const HOC_1 = require("../../system/HOC");
+const Box_1 = require("../../layout/Box");
+const Text_1 = require("../../typography/Text");
+const ThemeProvider_1 = require("../../system/ThemeProvider");
+exports.TextInput = HOC_1.withStatus((_a) => {
+    var { className, message, label, status, name } = _a, rest = __rest(_a, ["className", "message", "label", "status", "name"]);
+    return (jsx_runtime_1.jsxs(InputContainer, Object.assign({ flexDirection: "column", alignItems: "flex-start" }, { children: [!!label && (jsx_runtime_1.jsx(InputLabel, Object.assign({ as: "label", htmlFor: name, weight: "bold" }, { children: label }), void 0)),
+            jsx_runtime_1.jsx(StyledInputField, Object.assign({ className: className, type: "text", name: name, status: status }, rest), void 0),
+            !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
+});
+const InputLabel = styled_components_1.default(Text_1.Text) `
+  margin-bottom: ${({ theme }) => theme.px.small};
+`;
+const InputMessage = styled_components_1.default(Text_1.Text) `
+  color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'textHelp')};
+  margin-top: ${({ theme }) => theme.px.small};
+`;
+const InputContainer = styled_components_1.default(Box_1.Box) `
+  font-size: ${({ theme }) => theme.fontSize.base};
+`;
+const StyledInputField = styled_components_1.default(RawInput_1.RawInput) `
   background: ${({ theme }) => theme.palette.inputBg};
   border: 1px solid ${({ theme }) => theme.palette.inputBg};
+  border-color: ${({ theme, status }) => ThemeProvider_1.getStatusColor(theme, status, 'inputBg')};
+  border-radius: ${({ theme }) => theme.radius.small};
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   color: ${({ theme }) => theme.palette.inputColor};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
+  transition: border-color var(--global-transition);
+
+  &:focus {
+    outline: 0;
+    border-color: ${({ theme }) => theme.palette.inputFocused};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:disabled::placeholder {
+    color: ${({ theme }) => theme.palette.inputDisabled};
+  }
 `;

package/dist/components/system/GlobalStyles/globalStyles.js

@@ -22,10 +22,6 @@ exports.GlobalStyles = styled_components_1.createGlobalStyle `
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    /**
-     * Smooths light-on-dark Fonts on Mac
-     */
-    -webkit-font-smoothing: antialiased;
     /**
      * Prevent browser auto-weighting
      * @link https://css-tricks.com/almanac/properties/f/font-synthesis/

package/dist/components/system/HOC/index.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, FC } from 'react';
+export declare type StatusType = 'success' | 'warning' | 'critical' | 'active';
+export declare type WithStatusProps = {
+    status?: StatusType;
+};
+/**
+ * withStatus HOC
+ * Takes a component and applies the status prop to it.
+ * @returns Instantiated component w/ status and other props applied.
+ */
+export declare const withStatus: <P extends object>(Component: ComponentType<P>) => FC<P & WithStatusProps>;

package/dist/components/system/HOC/index.js

@@ -0,0 +1,25 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * withStatus HOC
+ * Takes a component and applies the status prop to it.
+ * @returns Instantiated component w/ status and other props applied.
+ */
+const withStatus = (Component) => function withStatus(_a) {
+    var { status } = _a, props = __rest(_a, ["status"]);
+    return jsx_runtime_1.jsx(Component, Object.assign({ status: status }, props), void 0);
+};
+exports.withStatus = withStatus;

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -205,6 +205,8 @@ export declare const Transition: {
  */
 export declare const IconSet: {
     readonly OpenFinIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
+    readonly BellIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
+    readonly WorkspaceIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly ActivityLogIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly AlignBaselineIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly AlignBottomIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
@@ -229,7 +231,6 @@ export declare const IconSet: {
     readonly BackpackIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly BadgeIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly BarChartIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
-    readonly BellIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly BlendingModeIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly BookmarkIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
     readonly BorderAllIcon: ({ color, ...props }: import("@modulz/radix-icons/dist/types").IconProps) => JSX.Element;
@@ -510,7 +511,7 @@ export declare const IconSet: {
 export declare const IconSize: {
     readonly xsmall: "8px";
     readonly small: "12px";
-    readonly base: "16px";
+    readonly base: "15px";
     readonly large: "20px";
     readonly xlarge: "24px";
     readonly xxlarge: "32px";

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -248,7 +248,7 @@ exports.IconSet = Object.assign(Object.assign({}, RadixIcons), OpenFinIcons);
 exports.IconSize = {
     [exports.Size.xsmall]: exports.UnitPx.small,
     [exports.Size.small]: exports.UnitPx.base,
-    [exports.Size.base]: exports.UnitPx.large,
+    [exports.Size.base]: '15px',
     [exports.Size.large]: exports.UnitPx.xlarge,
     [exports.Size.xlarge]: exports.UnitPx.xxlarge,
     [exports.Size.xxlarge]: exports.UnitPx.xxxlarge,

package/dist/components/system/ThemeProvider/lib/helpers.d.ts

@@ -1,4 +1,5 @@
 import { DefaultTheme, StyledProps } from 'styled-components';
+import { StatusType } from '../../HOC';
 export declare type ComponentVariants = {
     [key: string]: {
         [key: string]: any;
@@ -17,3 +18,8 @@ export declare const getVariantCSS: (variants: ComponentVariants, variantProp: s
 export declare const getFontFaces: ({ theme }: {
     theme: DefaultTheme;
 }) => import("styled-components").FlattenSimpleInterpolation;
+/**
+ * Retrive the correct palette value based on the provided status type.
+ * Falls back to optionally provided palette key, then to 'inherit'.
+ */
+export declare const getStatusColor: (theme: DefaultTheme, status?: StatusType | undefined, defaultKey?: "background1" | "background2" | "background3" | "background4" | "background5" | "background6" | "brandPrimary" | "brandSecondary" | "inputBg" | "inputColor" | "inputPlaceholder" | "inputDisabled" | "inputFocused" | "statusSuccess" | "statusWarning" | "statusCritical" | "statusActive" | "textDefault" | "textHelp" | "textInactive" | undefined) => string;

package/dist/components/system/ThemeProvider/lib/helpers.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFontFaces = exports.getVariantCSS = void 0;
+exports.getStatusColor = exports.getFontFaces = exports.getVariantCSS = void 0;
 const font_face_base64_1 = __importDefault(require("./font-face-base64"));
 const font_face_cdn_1 = __importDefault(require("./font-face-cdn"));
 /**
@@ -29,3 +29,22 @@ const getFontFaces = ({ theme }) => {
     }
 };
 exports.getFontFaces = getFontFaces;
+/**
+ * Retrive the correct palette value based on the provided status type.
+ * Falls back to optionally provided palette key, then to 'inherit'.
+ */
+const getStatusColor = (theme, status, defaultKey) => {
+    switch (status) {
+        case 'active':
+            return theme.palette.statusActive;
+        case 'critical':
+            return theme.palette.statusCritical;
+        case 'warning':
+            return theme.palette.statusWarning;
+        case 'success':
+            return theme.palette.statusSuccess;
+        default:
+            return defaultKey ? theme.palette[defaultKey] : 'inherit';
+    }
+};
+exports.getStatusColor = getStatusColor;

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export * from './components/controls/Button';
 export * from './components/controls/Toggle';
 export * from './components/elements/Badge';
 export * from './components/elements/Icon';
-export * from './components/input/Input';
+export * from './components/input/RawInput';
+export * from './components/input/TextInput';
 export * from './components/layout/Box';
 export * from './components/list/DefinitionList';
 export * from './components/system/GlobalStyles';

package/dist/index.js

@@ -27,7 +27,8 @@ __exportStar(require("./components/controls/Button"), exports);
 __exportStar(require("./components/controls/Toggle"), exports);
 __exportStar(require("./components/elements/Badge"), exports);
 __exportStar(require("./components/elements/Icon"), exports);
-__exportStar(require("./components/input/Input"), exports);
+__exportStar(require("./components/input/RawInput"), exports);
+__exportStar(require("./components/input/TextInput"), exports);
 __exportStar(require("./components/layout/Box"), exports);
 __exportStar(require("./components/list/DefinitionList"), exports);
 __exportStar(require("./components/system/GlobalStyles"), exports);

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.1",
+  "version": "0.1.2-alpha.1616610935",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "repository": "github:openfin/ui-library",
+  "homepage": "https://openfin-ui.netlify.app",
   "files": [
     "dist/**/*"
   ],

package/dist/components/input/Input/index.d.ts

@@ -1 +0,0 @@
-export * from './input';

package/dist/components/input/Input/input.d.ts

@@ -1,6 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-export declare type InputProps = InputHTMLAttributes<HTMLInputElement>;
-/**
- * Unstyled Input extended by other components
- */
-export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;