@openfin/ui-library 0.1.40 → 0.2.0-alpha.1657388871

package/dist/{index.d.ts → types/index.d.ts}

@@ -7,6 +7,8 @@ export * from './components/input/RawInput';
 export * from './components/input/TextInput';
 export * from './components/input/NumberInput';
 export * from './components/input/Checkbox';
+export * from './components/input/RadioInput';
+export * from './components/input/RadioGroup';
 export * from './components/layout/Box';
 export * from './components/layout/DefinitionList';
 export * from './components/system/GlobalStyles';

package/dist/{lib → types/lib}/math.d.ts

@@ -6,4 +6,8 @@
  * @returns A number in the range [min, max]
  * @type Number
  */
-export declare const clamp: (num: number, min?: number | undefined, max?: number | undefined) => number;
+export declare const clamp: (num: number, min?: number, max?: number) => number;
+/**
+ * Generates a random integer.
+ */
+export declare const generateRandomInteger: () => number;

package/dist/{storybookHelpers.d.ts → types/storybookHelpers.d.ts}

@@ -81,4 +81,4 @@ export declare const SpatialLink: import("styled-components").StyledComponent<"a
     target: "_blank";
     rel: "noreferrer";
     title: "Spatial";
-}, "target" | "href" | "title" | "rel">;
+}, "title" | "target" | "href" | "rel">;

package/package.json

@@ -1,96 +1,95 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.40",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "0.2.0-alpha.1657388871",
+  "main": "dist/openfin.ui.js",
+  "types": "dist/types/index.d.ts",
   "repository": "github:openfin/ui-library",
   "homepage": "https://openfin-ui.netlify.app",
   "files": [
     "dist/**/*"
   ],
   "license": "MIT",
+  "scripts": {
+    "start": "yarn storybook",
+    "build": "yarn build:clean && yarn build:src",
+    "build:src": "webpack build --config webpack.config.js --mode production",
+    "build:clean": "rimraf dist",
+    "build:dev": "webpack build --config webpack.config.js --mode development && yalc push",
+    "test": "jest",
+    "lint": "yarn lint:typescript && yarn lint:styles",
+    "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
+    "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
+    "storybook": "yarn storybook:cache-clear && start-storybook -p 6006 -s public",
+    "storybook:build": "build-storybook -s public",
+    "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook"
+  },
+  "peerDependencies": {
+    "styled-components": "=>4.4.1 <6.0.0"
+  },
+  "resolutions": {
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
+    "react": "^17",
+    "react-dom": "^17",
+    "react-is": "^17",
+    "styled-components": "^5"
+  },
   "dependencies": {
     "@modulz/radix-icons": "^4.0.0",
     "tinycolor2": "^1.4.2"
   },
-  "peerDependencies": {
-    "styled-components": "4.4.1"
-  },
   "devDependencies": {
-    "@babel/cli": "^7.15.4",
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@babel/preset-typescript": "^7.15.0",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/node-logger": "^6.3.8",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.8",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.2",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/faker": "^5.1.7",
-    "@types/jest": "^26.0.20",
-    "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/node": "^14.14.34",
+    "@babel/core": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@testing-library/dom": "^8.14.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/jest": "^28.1.3",
+    "@types/lodash.defaultsdeep": "^4.6.7",
+    "@types/node": "^18.0.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "@types/styled-components": "^5.1.9",
-    "@types/tinycolor2": "^1.4.2",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "babel-plugin-styled-components": "^1.13.2",
+    "@types/styled-components": "^5.1.25",
+    "@types/tinycolor2": "^1.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.21.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-jest": "^24.2.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "faker": "^5.4.0",
-    "husky": "^6.0.0",
-    "prettier": "^2.2.1",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "prettier": "^2.7.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
+    "react-is": "^17.0.2",
+    "react-refresh": "^0.14.0",
+    "require-from-string": "^2.0.2",
     "rimraf": "^3.0.2",
     "storybook-addon-performance": "^0.16.1",
-    "styled-components": "4.4.1",
-    "stylelint": "^13.12.0",
-    "stylelint-config-recommended": "^4.0.0",
+    "styled-components": "^5.3.5",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.0"
-  },
-  "scripts": {
-    "start": "yarn storybook",
-    "build": "yarn build:clean && yarn build:bundle",
-    "build:bundle": "yarn build:scripts && yarn build:types && yarn build:copy-assets",
-    "build:clean": "rimraf dist",
-    "build:copy-assets": "babel src/assets/ -d dist/assets --ignore \"src/**/*.ts\" --copy-files --no-copy-ignored --extensions .ts",
-    "build:dev": "yarn build && yalc push",
-    "build:scripts": "cross-env NODE_ENV=production babel src -d dist --extensions '.ts,.tsx'",
-    "build:types": "tsc -p tsconfig.bundle.json",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "yarn lint:typescript && yarn lint:styles",
-    "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
-    "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
-    "storybook": "yarn storybook:cache-clear && start-storybook -p 6006 -s public",
-    "storybook:build": "build-storybook -s public",
-    "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook",
-    "git:pre-push": "yarn lint && yarn test --watchAll=false && yarn build",
-    "prepare": "husky install"
-  },
-  "env": {
-    "jest/globals": true
-  },
-  "resolutions": {
-    "babel-loader": "8.1.0"
+    "ts-jest": "^28.0.5",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
   },
   "browserslist": {
     "production": [
@@ -106,16 +105,30 @@
   },
   "eslintConfig": {
     "extends": [
+      "plugin:@typescript-eslint/recommended",
+      "prettier",
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:jest/recommended"
     ],
     "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": "./*/tsconfig.json"
+    },
     "plugins": [
       "@typescript-eslint",
       "jest"
     ],
     "rules": {
+      "@typescript-eslint/ban-types": [
+        "error",
+        {
+          "types": {
+            "Function": false
+          },
+          "extendDefaults": true
+        }
+      ],
       "dot-notation": "error",
       "react/prop-types": "off",
       "react/jsx-uses-react": "off",
@@ -154,5 +167,15 @@
     "trailingComma": "es5",
     "arrowParens": "always",
     "printWidth": 100
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "<rootDir>/src/**/*.test.tsx"
+    ]
   }
 }

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

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

package/dist/assets/fonts/index.js

@@ -1,11 +0,0 @@
-"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

@@ -1,83 +0,0 @@
-"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

@@ -1,124 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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

@@ -1,98 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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);