@openfin/ui-library 0.1.0 → 0.1.2-alpha.1616610135

package/README.md

@@ -90,11 +90,11 @@ $ yarn storybook
 
 Great for a quick look at the latest build, [check it out](https://openfin-ui.netlify.com)
 
-## Codesandbox.io
+## UI Lib @ Codesandbox.io
 
-Coming Soon, great tool for developer experimentation without the overhead of forking the library or integrating it into an existing application.
+Great for developer experimentation without all of the overhead.
 
-`@TODO` Setup a Codesandbox Playground [PE-27](https://appoji.jira.com/browse/PE-10)
+The sandbox is currently **private**, request access and [give it a try](https://codesandbox.io/s/openfin-ui-library-39y7c).
 
 ## How to test
 
@@ -182,6 +182,10 @@ This triggers a Github Action to automatically build the latest version of the `
 
 - [Box](./src/components/layout/Box)
 
+### List
+
+- [DefinitionList](./src/components/list/DefinitionList)
+
 ### System
 
 - [GlobalStyles](./src/components/system/GlobalStyles)

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.0",
+  "version": "0.1.2-alpha.1616610135",
   "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/controls/Button/button.d.ts

@@ -1,37 +0,0 @@
-import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
-import { ButtonShape, ButtonSize, ButtonKind, ButtonLayout } from './button.variants';
-declare type ButtonPropsWithLabel = {
-    label: string;
-    children?: never;
-};
-declare type ButtonPropsWithChildren = {
-    label?: never;
-    children: ReactNode;
-};
-export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & (ButtonPropsWithLabel | ButtonPropsWithChildren) & {
-    label?: string;
-    href?: string;
-    size?: keyof typeof ButtonSize;
-    shape?: keyof typeof ButtonShape;
-    kind?: keyof typeof ButtonKind;
-    layout?: keyof typeof ButtonLayout;
-    children?: ReactNode;
-};
-/**
- * Button as Anchor
- * @example <Button as="a" href="https://..."/>
- *
- * Button with Label
- * @example <Button label="..."/>
- *
- * Button with Child Element
- * @example <Button><Child></Button>
- */
-export declare const Button: FC<ButtonProps>;
-/**
- * ## Button Variants
- */
-export declare const ButtonPrimary: FC<ButtonProps>;
-export declare const ButtonSecondary: FC<ButtonProps>;
-export declare const ButtonTertiary: FC<ButtonProps>;
-export {};

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

@@ -1,95 +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.ButtonTertiary = 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, { children: label }, void 0) : children }), void 0));
-};
-exports.Button = Button;
-const ButtonElement = styled_components_1.default.button `
-  /**
-   * 1. Initialize local variables with reasonable defaults
-   */
-  --color-background: ${({ theme }) => theme.palette.inputBg};
-  --color-foreground: ${({ theme }) => theme.palette.inputColor};
-
-  &:disabled {
-    --color-background: ${({ theme }) => theme.palette.inputDisabled};
-  }
-
-  /**
-   * 2. Inject variants -- ? What are 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)}
-
-  /**
-  * 3. Component Build
-  */
-  background: var(--color-background);
-  color: var(--color-foreground);
-
-  display: inline-flex;
-  border: none;
-  outline: none;
-  text-decoration: none;
-  white-space: nowrap;
-  line-height: ${({ theme }) => theme.lineHeight.ui};
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-
-  &:focus,
-  &:active {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme._color.black30},
-      0 0 0 2px var(--color-background);
-  }
-
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-`;
-const ButtonLabel = styled_components_1.default(Box_1.Box).attrs({
-    alignItems: 'center',
-    justifyContent: 'center',
-}) `
-  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 ButtonTertiary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
-exports.ButtonTertiary = ButtonTertiary;

package/dist/components/controls/Button/button.variants.d.ts

@@ -1,64 +0,0 @@
-/**
- * Define all Button Variants here in one place.
- * Variants should match the variants in Figma
- */
-export declare const Variant: {
-    readonly shape: "shape";
-    readonly size: "size";
-    readonly kind: "kind";
-    readonly layout: "layout";
-};
-/**
- * Button Type -- Describes the "role" of a button
- */
-export declare const ButtonKind: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-    readonly textOnly: "textOnly";
-};
-export declare type ButtonKindType = keyof typeof ButtonKind;
-/**
- * Button Size
- */
-export declare const ButtonSize: {
-    readonly small: "small";
-    readonly base: "base";
-    readonly large: "large";
-};
-export declare type ButtonSizeType = keyof typeof ButtonSize;
-/**
- * Button Width
- */
-export declare const ButtonLayout: {
-    readonly fit: "fit";
-    readonly full: "full";
-};
-export declare type ButtonLayoutType = keyof typeof ButtonLayout;
-/**
- * Button Shape
- */
-export declare const ButtonShape: {
-    readonly square: "square";
-    readonly pill: "pill";
-};
-export declare type ButtonShapeType = keyof typeof ButtonShape;
-export declare const variants: {
-    readonly size: {
-        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    };
-    readonly shape: {
-        readonly square: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly pill: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    };
-    readonly layout: {
-        readonly fit: import("styled-components").FlattenSimpleInterpolation;
-        readonly full: import("styled-components").FlattenSimpleInterpolation;
-    };
-    readonly kind: {
-        readonly primary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly secondary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly textOnly: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    };
-};

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

@@ -1,88 +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.large};
-      font-size: ${({ theme }) => theme.fontSize.xlarge};
-    `,
-        [exports.ButtonSize.small]: styled_components_1.css `
-      padding: ${({ theme }) => theme.px.small};
-      font-size: ${({ theme }) => theme.fontSize.base};
-    `,
-        [exports.ButtonSize.large]: styled_components_1.css `
-      padding: ${({ theme }) => theme.px.xlarge};
-      font-size: ${({ theme }) => theme.fontSize.xxxlarge};
-    `,
-    },
-    [exports.Variant.shape]: {
-        [exports.ButtonShape.square]: styled_components_1.css `
-      border-radius: ${({ theme }) => theme.radius.base};
-    `,
-        [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 `
-      --color-background: ${({ theme }) => theme.palette.brandPrimary};
-    `,
-        [exports.ButtonKind.secondary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.brandSecondary};
-    `,
-        [exports.ButtonKind.textOnly]: styled_components_1.css `
-      --color-background: transparent;
-      --color-foreground: ${({ theme }) => theme.palette.textDefault};
-    `,
-    },
-};

package/dist/components/controls/Button/index.d.ts

@@ -1,2 +0,0 @@
-export * from './button';
-export * from './button.variants';

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.d.ts

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

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.d.ts

@@ -1,9 +0,0 @@
-import { FC, InputHTMLAttributes } from 'react';
-export declare type LabelSideType = 'left' | 'right';
-export declare type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
-    label?: string;
-    labelSide?: LabelSideType;
-    type?: 'checkbox' | 'radio';
-    onChange?: Function;
-};
-export declare const Toggle: FC<ToggleProps>;

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

@@ -1,94 +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 Input_1 = require("../../input/Input");
-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"]);
-    const [isChecked, setIsChecked] = react_1.useState(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({ id: id, type: type }, inputProps, { onChange: (event) => {
-                            setIsChecked(event.target.checked);
-                            onChange(event);
-                        } }), void 0),
-                    jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1 }, 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 === 'right' ? '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.inputBg};
-  border-radius: calc(0.5 * var(--px-toggle));
-
-  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
-  transition: background var(--global-transition);
-
-  &: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: ${({ theme }) => theme.palette.inputColor};
-  border: none;
-  outline: none;
-  transition: left var(--global-transition);
-  pointer-events: none; /* Allow pass-thru for native input */
-`;
-const ToggleInput = styled_components_1.default(Input_1.Input) `
-  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.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Number displayed in the badge.
-     */
-    count: number;
-    /**
-     * If `count` is greater than `max` it will be clamped to `max`.
-     * When clamped it will display `{max}+`.
-     *
-     * @example
-     * <Badge count={200} max={99} />
-     * // outputs `99+`
-     */
-    max?: number;
-}
-export declare const Badge: React.FC<BadgeProps>;

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: 0px 2px 4px rgba(0, 0, 0, 0.2);
-`;

package/dist/components/elements/Badge/index.d.ts

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

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);

package/dist/components/elements/Icon/icon.d.ts

@@ -1,15 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { IconSizeType, IconType } from '../../system/ThemeProvider/lib/types';
-export declare type PropsWithIcon = {
-    icon: IconType;
-    children?: never;
-};
-export declare type PropsWithChild = {
-    icon?: never;
-    children: ReactNode;
-};
-export declare type IconProps = HTMLAttributes<HTMLDivElement> & (PropsWithIcon | PropsWithChild) & {
-    size?: IconSizeType;
-    containerSize?: IconSizeType;
-};
-export declare const Icon: import("styled-components").StyledComponent<({ icon, children, size, containerSize, ...props }: IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,56 +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.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, { icon: icon }, void 0) : children }), void 0));
-}) ``;
-const IconSvg = styled_components_1.default((_a) => {
-    var { icon } = _a, props = __rest(_a, ["icon"]);
-    const SVG = constants_1.IconSet[icon];
-    return jsx_runtime_1.jsx(SVG, Object.assign({}, 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.d.ts

@@ -1,28 +0,0 @@
-/**
- * Define all Button Variants here in one place.
- * Variants should match the variants in Figma
- */
-export declare const Variant: {
-    readonly iconSize: "iconSize";
-    readonly containerSize: "containerSize";
-};
-export declare const variants: {
-    readonly iconSize: {
-        readonly xsmall: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly xlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly xxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly xxxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    };
-    readonly containerSize: {
-        readonly xsmall: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly base: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly xlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly xxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly xxxlarge: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    };
-};