@openfin/ui-library 0.1.40-alpha.1657110576 → 0.1.40

package/README.md

@@ -163,6 +163,13 @@ $ yarn build && yalc push
 
 - Storybook does not pick up changes after a `yalc push` and must be restarted
 
+### Linting
+
+```sh
+# Husky runs this command automatically before pushing
+$ yarn git:pre-push
+```
+
 ## Compiling the Library
 
 ### `tsonfig.json`

package/dist/assets/fonts/index.d.ts

@@ -0,0 +1,6 @@
+export declare const Fonts: {
+    regular: any;
+    italic: any;
+    semiBold: any;
+    semiBoldItalic: any;
+};

package/dist/assets/fonts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fonts = void 0;
+const Inter_Regular_woff2_1 = __importDefault(require("./Inter-Regular.woff2"));
+const Inter_Italic_woff2_1 = __importDefault(require("./Inter-Italic.woff2"));
+const Inter_SemiBold_woff2_1 = __importDefault(require("./Inter-SemiBold.woff2"));
+const Inter_SemiBoldItalic_woff2_1 = __importDefault(require("./Inter-SemiBoldItalic.woff2"));
+exports.Fonts = { regular: Inter_Regular_woff2_1.default, italic: Inter_Italic_woff2_1.default, semiBold: Inter_SemiBold_woff2_1.default, semiBoldItalic: Inter_SemiBoldItalic_woff2_1.default };

package/dist/components/controls/Button/button.js

@@ -0,0 +1,83 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTextOnly = exports.ButtonSecondary = exports.ButtonPrimary = exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("../../layout/Box");
+const helpers_1 = require("../../system/ThemeProvider/lib/helpers");
+const button_variants_1 = require("./button.variants");
+/**
+ * Button as Anchor
+ * @example <Button as="a" href="https://..." />
+ *
+ * Button with Label
+ * @example <Button label="..." />
+ *
+ * Button with Child Element
+ * @example <Button><Child /></Button>
+ */
+const Button = (_a) => {
+    var { label, children, size = 'base', shape = 'square', kind = 'primary', layout = 'fit', href } = _a, buttonProps = __rest(_a, ["label", "children", "size", "shape", "kind", "layout", "href"]);
+    return (jsx_runtime_1.jsx(ButtonElement, Object.assign({ as: href ? 'a' : 'button', size: size, shape: shape, kind: kind, layout: layout }, buttonProps, { children: label ? (jsx_runtime_1.jsx(ButtonLabel, Object.assign({ alignItems: "center", justifyContent: "center" }, { children: label }), void 0)) : (children) }), void 0));
+};
+exports.Button = Button;
+const ButtonElement = styled_components_1.default.button `
+  /* Default values that get overridden by variants */
+  background: ${({ theme }) => theme.palette.inputBackground};
+  border: 1px solid ${({ theme }) => theme.palette.inputBackground};
+  color: ${({ theme }) => theme.palette.brandPrimaryText};
+
+  /* Inject variants */
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.size)}
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.shape)}
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.kind)}
+  ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.layout)}
+
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.px.small};
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  line-height: ${({ theme }) => theme.lineHeight.ui};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  transition: border-color var(--openfin-ui-globalTransition);
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled,
+  &:active:disabled {
+    background: ${({ theme }) => theme.palette.inputDisabled};
+    border-color: ${({ theme }) => theme.palette.inputDisabled};
+    color: ${({ theme }) => theme.palette.inputPlaceholder};
+    cursor: not-allowed;
+  }
+`;
+const ButtonLabel = styled_components_1.default(Box_1.Box) `
+  padding: ${({ theme }) => `0 ${theme.px.xsmall}`};
+`;
+/**
+ * ## Button Variants
+ */
+const ButtonPrimary = (props) => jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "primary" }), void 0);
+exports.ButtonPrimary = ButtonPrimary;
+const ButtonSecondary = (props) => jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "secondary" }), void 0);
+exports.ButtonSecondary = ButtonSecondary;
+const ButtonTextOnly = (props) => jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0);
+exports.ButtonTextOnly = ButtonTextOnly;

package/dist/components/controls/Button/button.variants.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.variants = exports.ButtonShape = exports.ButtonLayout = exports.ButtonSize = exports.ButtonKind = exports.Variant = void 0;
+const styled_components_1 = require("styled-components");
+/**
+ * Define all Button Variants here in one place.
+ * Variants should match the variants in Figma
+ */
+exports.Variant = {
+    shape: 'shape',
+    size: 'size',
+    kind: 'kind',
+    layout: 'layout',
+};
+/**
+ * Button Type -- Describes the "role" of a button
+ */
+exports.ButtonKind = {
+    primary: 'primary',
+    secondary: 'secondary',
+    textOnly: 'textOnly',
+};
+/**
+ * Button Size
+ */
+exports.ButtonSize = {
+    small: 'small',
+    base: 'base',
+    large: 'large',
+};
+/**
+ * Button Width
+ */
+exports.ButtonLayout = {
+    fit: 'fit',
+    full: 'full',
+};
+/**
+ * Button Shape
+ */
+exports.ButtonShape = {
+    square: 'square',
+    pill: 'pill',
+};
+exports.variants = {
+    [exports.Variant.size]: {
+        [exports.ButtonSize.base]: styled_components_1.css `
+      padding: ${({ theme }) => `${theme.px.small} ${theme.px.large}`};
+      font-size: ${({ theme }) => theme.fontSize.base};
+    `,
+        [exports.ButtonSize.small]: styled_components_1.css `
+      padding: ${({ theme }) => `${theme.px.xsmall} ${theme.px.base}`};
+      font-size: ${({ theme }) => theme.fontSize.small};
+    `,
+        [exports.ButtonSize.large]: styled_components_1.css `
+      padding: ${({ theme }) => `${theme.px.base} ${theme.px.xlarge}`};
+      font-size: ${({ theme }) => theme.fontSize.large};
+    `,
+    },
+    [exports.Variant.shape]: {
+        [exports.ButtonShape.square]: styled_components_1.css `
+      border-radius: ${({ theme }) => theme.radius.small};
+    `,
+        [exports.ButtonShape.pill]: styled_components_1.css `
+      border-radius: ${({ theme }) => theme.radius.pill};
+    `,
+    },
+    [exports.Variant.layout]: {
+        [exports.ButtonLayout.fit]: styled_components_1.css `
+      width: fit-content;
+    `,
+        [exports.ButtonLayout.full]: styled_components_1.css `
+      width: 100%;
+    `,
+    },
+    [exports.Variant.kind]: {
+        [exports.ButtonKind.primary]: styled_components_1.css `
+      background: ${({ theme }) => theme.palette.brandPrimary};
+      border-color: ${({ theme }) => theme.palette.brandPrimary};
+
+      &:hover {
+        background: ${({ theme }) => theme.palette.brandPrimaryHover};
+      }
+
+      &:active {
+        background: ${({ theme }) => theme.palette.brandPrimaryActive};
+      }
+
+      &:focus {
+        border-color: ${({ theme }) => theme.palette.brandPrimaryFocused};
+      }
+    `,
+        [exports.ButtonKind.secondary]: styled_components_1.css `
+      background: ${({ theme }) => theme.palette.brandSecondary};
+      border-color: ${({ theme }) => theme.palette.brandSecondary};
+      color: ${({ theme }) => theme.palette.brandSecondaryText};
+
+      &:hover {
+        background: ${({ theme }) => theme.palette.brandSecondaryHover};
+      }
+
+      &:active {
+        background: ${({ theme }) => theme.palette.brandSecondaryActive};
+      }
+
+      &:focus {
+        border-color: ${({ theme }) => theme.palette.brandSecondaryFocused};
+      }
+    `,
+        [exports.ButtonKind.textOnly]: styled_components_1.css `
+      background: transparent;
+      border-color: transparent;
+      color: ${({ theme }) => theme.palette.textDefault};
+
+      &:active {
+        opacity: 0.8;
+      }
+
+      &:focus {
+        border-color: ${({ theme }) => theme.palette.inputFocused};
+      }
+    `,
+    },
+};

package/dist/components/controls/Button/index.js

@@ -0,0 +1,14 @@
+"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("./button"), exports);
+__exportStar(require("./button.variants"), exports);

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

@@ -0,0 +1,13 @@
+"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("./toggle"), exports);

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

@@ -0,0 +1,98 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 RawInput_1 = require("../../input/RawInput");
+const Box_1 = require("../../layout/Box");
+const Toggle = (_a) => {
+    var { id, label, onChange, labelSide = 'right', type = 'checkbox' } = _a, inputProps = __rest(_a, ["id", "label", "onChange", "labelSide", "type"]);
+    const [isChecked, setIsChecked] = react_1.useState(inputProps.checked);
+    react_1.useEffect(() => {
+        setIsChecked(inputProps.checked);
+    }, [inputProps.checked]);
+    return (jsx_runtime_1.jsxs(ToggleContainer, Object.assign({ labelSide: labelSide }, { children: [label ? jsx_runtime_1.jsx(ToggleLabel, Object.assign({ htmlFor: id }, { children: label }), void 0) : undefined,
+            jsx_runtime_1.jsxs(InputContainer, Object.assign({ isChecked: isChecked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({}, inputProps, { id: id, type: type, onChange: (event) => {
+                            setIsChecked(event.target.checked);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                        } }), void 0),
+                    jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1, "aria-hidden": "true", isChecked: isChecked }, void 0)] }), void 0)] }), void 0));
+};
+exports.Toggle = Toggle;
+const ToggleContainer = styled_components_1.default.div `
+  display: flex;
+  gap: ${({ theme }) => theme.px.xlarge};
+  flex-direction: ${({ labelSide }) => (labelSide === 'left' ? 'row' : 'row-reverse')};
+  line-height: ${({ theme }) => theme.px.xlarge /* Matches height of Input to vertically center text */};
+`;
+const InputContainer = styled_components_1.default(Box_1.Box) `
+  --px-toggle: ${({ theme }) => theme.px.xlarge};
+  --px-knob: ${({ theme }) => theme.px.base};
+
+  position: relative;
+  height: var(--px-toggle);
+  width: calc(2 * var(--px-toggle));
+  border: 1px solid
+    ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.background6};
+  border-radius: calc(0.5 * var(--px-toggle));
+
+  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.background6};
+  transition: background var(--openfin-ui-globalTransition),
+    border-color var(---openfin-ui-globalTransition);
+
+  &:focus-within {
+    border-color: ${({ theme }) => theme.palette.inputFocused};
+  }
+`;
+const ToggleKnob = styled_components_1.default.button `
+  position: absolute;
+  width: var(--px-knob);
+  height: var(--px-knob);
+  top: 50%;
+  left: ${({ theme }) => theme.px.xsmall};
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimaryText : theme.palette.inputColor};
+  border: none;
+  outline: none;
+  transition: left var(--openfin-ui-globalTransition), background var(--openfin-ui-globalTransition);
+  pointer-events: none; /* Allow pass-thru for native input */
+`;
+const ToggleInput = styled_components_1.default(RawInput_1.RawInput) `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border: none;
+  outline: none;
+  appearance: none;
+  display: block;
+
+  &:checked + ${ToggleKnob} {
+    left: calc(100% - ${({ theme }) => theme.px.large});
+  }
+  &:disabled + ${ToggleKnob} {
+    background: ${({ theme }) => theme.palette.inputDisabled};
+  }
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+`;
+const ToggleLabel = styled_components_1.default.label ``;

package/dist/components/elements/Badge/badge.js

@@ -0,0 +1,41 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("../../layout/Box");
+const Badge = (_a) => {
+    var { count = 0, max } = _a, rest = __rest(_a, ["count", "max"]);
+    let value = count.toString();
+    if (max && count > max) {
+        value = `${max}+`;
+    }
+    return jsx_runtime_1.jsx(BadgeElement, Object.assign({}, rest, { children: value }), void 0);
+};
+exports.Badge = Badge;
+const BadgeElement = styled_components_1.default(Box_1.Box) `
+  background: ${({ theme }) => theme.palette.statusCritical};
+  border-radius: ${({ theme }) => theme.radius.pill};
+  color: ${({ theme }) => theme._color.white};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  min-width: ${({ theme }) => theme.px.xlarge};
+  padding: 2px 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: ${({ theme }) => theme.shadow.base};
+`;

package/dist/components/elements/Badge/index.js

@@ -0,0 +1,13 @@
+"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("./badge"), exports);

package/dist/components/elements/Icon/icon.js

@@ -0,0 +1,56 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("../../layout/Box");
+const ThemeProvider_1 = require("../../system/ThemeProvider");
+const constants_1 = require("../../system/ThemeProvider/lib/constants");
+const icon_variants_1 = require("./icon.variants");
+exports.Icon = styled_components_1.default((_a) => {
+    var { icon, children, size = 'base', containerSize } = _a, props = __rest(_a, ["icon", "children", "size", "containerSize"]);
+    return (jsx_runtime_1.jsx(IconBox, Object.assign({}, props, { iconSize: size, containerSize: containerSize || size, justifyContent: "center", alignItems: "center" }, { children: icon ? jsx_runtime_1.jsx(IconSvg, { ariaLabel: props['aria-label'], icon: icon }, void 0) : children }), void 0));
+}) ``;
+const IconSvg = styled_components_1.default((_a) => {
+    var { icon, ariaLabel } = _a, props = __rest(_a, ["icon", "ariaLabel"]);
+    const SVG = constants_1.IconSet[icon];
+    return jsx_runtime_1.jsx(SVG, Object.assign({ role: "img", "aria-label": ariaLabel }, props), void 0);
+}) ``;
+const IconBox = styled_components_1.default(Box_1.Box) `
+  /**
+   * 1. Initialize local variables with reasonable defaults
+   */
+  --px-default: ${({ theme }) => theme.iconSize.base};
+
+  /**
+   * 2. Inject variants -- ? What are Variants
+   */
+  ${ThemeProvider_1.getVariantCSS(icon_variants_1.variants, icon_variants_1.Variant.containerSize)}
+  ${ThemeProvider_1.getVariantCSS(icon_variants_1.variants, icon_variants_1.Variant.iconSize)}
+
+  width: var(--px-container, var(--px-default));
+  height: var(--px-container, var(--px-default));
+
+  /* SVG Asset */
+  & > *,
+  ${IconSvg} {
+    display: block;
+    width: var(--px-icon, var(--px-default));
+    height: var(--px-icon, var(--px-default));
+    border-radius: inherit;
+  }
+`;

package/dist/components/elements/Icon/icon.variants.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.variants = exports.Variant = void 0;
+const styled_components_1 = require("styled-components");
+/**
+ * Define all Button Variants here in one place.
+ * Variants should match the variants in Figma
+ */
+exports.Variant = {
+    iconSize: 'iconSize',
+    containerSize: 'containerSize',
+};
+exports.variants = {
+    [exports.Variant.iconSize]: {
+        xsmall: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.xsmall};
+    `,
+        small: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.small};
+    `,
+        base: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.base};
+    `,
+        large: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.large};
+    `,
+        xlarge: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.xlarge};
+    `,
+        xxlarge: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.xxlarge};
+    `,
+        xxxlarge: styled_components_1.css `
+      --px-icon: ${({ theme }) => theme.iconSize.xxxlarge};
+    `,
+    },
+    [exports.Variant.containerSize]: {
+        xsmall: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.xsmall};
+    `,
+        small: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.small};
+    `,
+        base: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.base};
+    `,
+        large: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.large};
+    `,
+        xlarge: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.xlarge};
+    `,
+        xxlarge: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.xxlarge};
+    `,
+        xxxlarge: styled_components_1.css `
+      --px-container: ${({ theme }) => theme.iconSize.xxxlarge};
+    `,
+    },
+};

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

@@ -0,0 +1,13 @@
+"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("./icon"), exports);

package/dist/{types/components → components}/elements/Icon/openfin/BellIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconProps } from '@modulz/radix-icons/dist/types';
 /**
  * OVERRIDE!

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, role: "img" }, void 0) }), void 0));
+};
+exports.BellIcon = BellIcon;

package/dist/{types/components → components}/elements/Icon/openfin/BrokenLinkIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '@modulz/radix-icons/dist/types';
 export declare const BrokenLinkIcon: ({ color, ...props }: IconProps) => JSX.Element;

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

@@ -0,0 +1,21 @@
+"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.BrokenLinkIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const BrokenLinkIcon = (_a) => {
+    var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
+    return (jsx_runtime_1.jsxs("svg", Object.assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsx_runtime_1.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.3335 3.7002C6.05735 3.7002 5.8335 3.92405 5.8335 4.2002V27.8002C5.8335 28.0763 6.05735 28.3002 6.3335 28.3002H25.6668C25.943 28.3002 26.1668 28.0763 26.1668 27.8002V12.2335H18.1335C17.8574 12.2335 17.6335 12.0097 17.6335 11.7335V3.7002H6.3335ZM18.6335 4.4073L25.4597 11.2335H18.6335V4.4073ZM4.8335 4.2002C4.8335 3.37177 5.50507 2.7002 6.3335 2.7002H18.1335C18.2661 2.7002 18.3933 2.75287 18.487 2.84664L27.0204 11.38C27.1141 11.4737 27.1668 11.6009 27.1668 11.7335V27.8002C27.1668 28.6286 26.4953 29.3002 25.6668 29.3002H6.3335C5.50507 29.3002 4.8335 28.6286 4.8335 27.8002V4.2002Z", fill: color }, void 0),
+            jsx_runtime_1.jsx("path", { d: "M14.248 21.9084V21.8409C14.2528 21.4006 14.2966 21.0502 14.3794 20.7898C14.4647 20.5294 14.5854 20.3187 14.7417 20.1577C14.8979 19.9967 15.0861 19.8499 15.3063 19.7173C15.4483 19.6274 15.5762 19.5268 15.6898 19.4155C15.8034 19.3042 15.8934 19.1764 15.9597 19.032C16.026 18.8875 16.0591 18.7277 16.0591 18.5526C16.0591 18.3419 16.0094 18.1596 15.91 18.0057C15.8105 17.8518 15.678 17.7334 15.5123 17.6506C15.3489 17.5653 15.1666 17.5227 14.9654 17.5227C14.7831 17.5227 14.6091 17.5606 14.4434 17.6364C14.2776 17.7121 14.1403 17.8305 14.0314 17.9915C13.9225 18.1501 13.8598 18.3549 13.8432 18.6058H12.7637C12.7802 18.1797 12.888 17.8198 13.0868 17.5263C13.2857 17.2304 13.5485 17.0066 13.8752 16.8551C14.2042 16.7036 14.5676 16.6278 14.9654 16.6278C15.401 16.6278 15.7821 16.7095 16.1088 16.8729C16.4355 17.0339 16.6889 17.2599 16.8688 17.5511C17.0511 17.84 17.1422 18.1773 17.1422 18.5632C17.1422 18.8284 17.1008 19.0675 17.0179 19.2805C16.9351 19.4912 16.8167 19.6795 16.6628 19.8452C16.5113 20.0109 16.329 20.1577 16.1159 20.2855C15.9147 20.411 15.7514 20.5412 15.6259 20.6761C15.5028 20.8111 15.4128 20.9709 15.356 21.1555C15.2992 21.3402 15.2684 21.5687 15.2637 21.8409V21.9084H14.248ZM14.7843 24.0675C14.5901 24.0675 14.4232 23.9988 14.2836 23.8615C14.1439 23.7218 14.074 23.5537 14.074 23.3572C14.074 23.1631 14.1439 22.9974 14.2836 22.8601C14.4232 22.7204 14.5901 22.6506 14.7843 22.6506C14.976 22.6506 15.1417 22.7204 15.2814 22.8601C15.4235 22.9974 15.4945 23.1631 15.4945 23.3572C15.4945 23.4875 15.4614 23.607 15.3951 23.7159C15.3311 23.8224 15.2459 23.9077 15.1394 23.9716C15.0328 24.0355 14.9145 24.0675 14.7843 24.0675Z", fill: color }, void 0)] }), void 0));
+};
+exports.BrokenLinkIcon = BrokenLinkIcon;

package/dist/{types/components → components}/elements/Icon/openfin/FilterIcon.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { IconProps } from '@modulz/radix-icons/dist/types';
 export declare const FilterIcon: ({ color, ...props }: IconProps) => JSX.Element;

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

@@ -0,0 +1,20 @@
+"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.FilterIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FilterIcon = (_a) => {
+    var { color = 'currentColor' } = _a, props = __rest(_a, ["color"]);
+    return (jsx_runtime_1.jsx("svg", Object.assign({ width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx_runtime_1.jsx("path", { d: "M4 6.5C4 6.36739 4.05268 6.24021 4.14645 6.14645C4.24021 6.05268 4.36739 6 4.5 6H7.5C7.63261 6 7.75979 6.05268 7.85355 6.14645C7.94732 6.24021 8 6.36739 8 6.5C8 6.63261 7.94732 6.75979 7.85355 6.85355C7.75979 6.94732 7.63261 7 7.5 7H4.5C4.36739 7 4.24021 6.94732 4.14645 6.85355C4.05268 6.75979 4 6.63261 4 6.5ZM2 3.5C2 3.36739 2.05268 3.24021 2.14645 3.14645C2.24021 3.05268 2.36739 3 2.5 3H9.5C9.63261 3 9.75979 3.05268 9.85355 3.14645C9.94732 3.24021 10 3.36739 10 3.5C10 3.63261 9.94732 3.75979 9.85355 3.85355C9.75979 3.94732 9.63261 4 9.5 4H2.5C2.36739 4 2.24021 3.94732 2.14645 3.85355C2.05268 3.75979 2 3.63261 2 3.5ZM0 0.5C0 0.367392 0.0526785 0.240215 0.146447 0.146447C0.240215 0.0526785 0.367392 0 0.5 0H11.5C11.6326 0 11.7598 0.0526785 11.8536 0.146447C11.9473 0.240215 12 0.367392 12 0.5C12 0.632608 11.9473 0.759785 11.8536 0.853553C11.7598 0.947321 11.6326 1 11.5 1H0.5C0.367392 1 0.240215 0.947321 0.146447 0.853553C0.0526785 0.759785 0 0.632608 0 0.5Z", fill: color }, void 0) }), void 0));
+};
+exports.FilterIcon = FilterIcon;

package/dist/{types/components → components}/elements/Icon/openfin/FloppyDiskIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IconProps } from '@modulz/radix-icons/dist/types';
 /**
  * Floppy Disc Icon