@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/ButtonTabs/ButtonTabs.stories.js

@@ -0,0 +1,471 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Wrapped = exports._TextOnly = exports._TextAndIcon = exports._IconOnlyWrapped = exports._IconOnly = exports._DisabledButtons = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ButtonDropdown = require("../ButtonDropdown");
+var _Tooltip = require("../Tooltip");
+var _ButtonTab = require("./ButtonTab");
+var _ButtonTabs = require("./ButtonTabs");
+var _ButtonTabsStoriesModule = _interopRequireDefault(require("./ButtonTabs.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const anchorPositionOptions = [...Object.values(_ButtonDropdown.ANCHOR_POSITION_TYPE)];
+const elevationOptions = [...Object.values(_Tooltip.ELEVATION_TYPES)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Button Tabs/Button Tabs',
+  component: _ButtonTabs.ButtonTabs,
+  argTypes: {
+    classNames: {
+      description: 'External classNames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string}'
+        }
+      }
+    },
+    selectedButtonTabId: {
+      description: 'Selected Id of the Button Tab, when the selectedId is same as id, Button Tab is updated to the selected state',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onButtonTabSelect: {
+      description: '**onClick** handler that is applied to the Button Tab. This is internally passed to the `ButtonTab` component',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '(id: string, e?: SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    elevation: {
+      description: 'This is passed to ButtonTabDropdown. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
+      control: {
+        type: 'select'
+      },
+      options: elevationOptions,
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'modal'
+        }
+      }
+    },
+    size: {
+      description: 'ButtonTabs support only two size variants namely small and medium. `small` < `medium`. This is internally passed to the `ButtonTab` component',
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'medium'],
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    disabled: {
+      description: 'If **true**, the component is disabled. This is internally passed to the `ButtonTab` component',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    isFluid: {
+      description: 'If **true**, the component would take the container\'s `width`. This is internally passed to the `ButtonTab` component',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    children: {
+      type: {
+        required: true
+      },
+      description: 'The content of the ButtonTabs. This should always have list of `ButtonTab` as children',
+      table: {
+        type: {
+          summary: 'React.Component | string'
+        }
+      }
+    },
+    wrapAfter: {
+      description: 'Number of tabs to display before wrapping with a dropdown',
+      control: {
+        type: 'number',
+        min: 0
+      },
+      table: {
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    wrapTabTitle: {
+      description: 'Title of the button tab that opens the wrapped dropdown',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'more'
+        }
+      }
+    },
+    anchorPosition: {
+      options: anchorPositionOptions,
+      description: 'Position of Menu relative to its reference element. It can be any one value from the dropdown',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'bottom-end'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a ButtonTabs component.',
+      description: {
+        component: `
+\`\`\`js
+import { ButtonTabs, ButtonTab } from "@spaced-out/ui-design-system/lib/components/ButtonTabs";
+\`\`\`
+**ButtonTabs** accepts multiple **ButtonTab** elements as children. \`ButtonTab\` make it easy to switch between different views.
+A selection of tab can be done by passing selectedId to the \`ButtonTab\` component. Some props like **size**, **isFluid**
+and **disabled** are propagated as is to the children \`ButtonTab\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/ButtonTabs/ButtonTabs.jsx'
+    }
+  }
+};
+const _TextOnly = args => {
+  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ButtonTabsStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_ButtonTabs.ButtonTabs, _extends({}, args, {
+    selectedButtonTabId: selectedId,
+    classNames: {
+      wrapper: _ButtonTabsStoriesModule.default.wrapper
+    },
+    onButtonTabSelect: id => setSelectedId(id)
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "1"
+  }, "School Bus"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "2"
+  }, "Tram Train"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "3"
+  }, "Airplane Arrival"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "4"
+  }, "Space Shuttle"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "5"
+  }, "Fighter Jet")));
+};
+exports._TextOnly = _TextOnly;
+_TextOnly.args = {
+  selectedButtonTabId: '4'
+};
+const _TextAndIcon = args => {
+  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ButtonTabsStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_ButtonTabs.ButtonTabs, _extends({}, args, {
+    selectedButtonTabId: selectedId,
+    classNames: {
+      wrapper: _ButtonTabsStoriesModule.default.wrapper
+    },
+    onButtonTabSelect: id => setSelectedId(id)
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "1",
+    iconType: "duotone",
+    iconName: "bus-school"
+  }, "School Bus"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "2",
+    iconType: "duotone",
+    iconName: "train-tram"
+  }, "Tram Train"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "3",
+    iconType: "duotone",
+    iconName: "plane-arrival"
+  }, "Airplane Arrival"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "4",
+    iconType: "duotone",
+    iconName: "shuttle-space"
+  }, "Space Shuttle"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "5",
+    iconType: "duotone",
+    iconName: "jet-fighter"
+  }, "Fighter Jet")));
+};
+exports._TextAndIcon = _TextAndIcon;
+_TextAndIcon.args = {
+  selectedButtonTabId: '2'
+};
+const _IconOnly = args => {
+  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ButtonTabsStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_ButtonTabs.ButtonTabs, _extends({}, args, {
+    selectedButtonTabId: selectedId,
+    classNames: {
+      wrapper: _ButtonTabsStoriesModule.default.wrapper
+    },
+    onButtonTabSelect: id => setSelectedId(id)
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "1",
+    iconType: "duotone",
+    iconName: "bus-school"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "2",
+    iconType: "duotone",
+    iconName: "train-tram"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "3",
+    iconType: "duotone",
+    iconName: "plane-arrival"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "4",
+    iconType: "duotone",
+    iconName: "shuttle-space"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "5",
+    iconType: "duotone",
+    iconName: "jet-fighter"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "6",
+    iconType: "duotone",
+    iconName: "banana"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "7",
+    iconType: "duotone",
+    iconName: "citrus"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "8",
+    iconType: "duotone",
+    iconName: "pineapple"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "9",
+    iconType: "duotone",
+    iconName: "lemon"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "10",
+    iconType: "duotone",
+    iconName: "pie"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "11",
+    iconType: "duotone",
+    iconName: "pear"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "12",
+    iconType: "duotone",
+    iconName: "grapes"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "13",
+    iconType: "duotone",
+    iconName: "mango"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "14",
+    iconType: "duotone",
+    iconName: "avocado"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "15",
+    iconType: "duotone",
+    iconName: "leaf"
+  })));
+};
+exports._IconOnly = _IconOnly;
+_IconOnly.args = {
+  selectedButtonTabId: '5'
+};
+const _IconOnlyWrapped = args => {
+  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ButtonTabsStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_ButtonTabs.ButtonTabs, _extends({}, args, {
+    selectedButtonTabId: selectedId,
+    classNames: {
+      wrapper: _ButtonTabsStoriesModule.default.wrapper
+    },
+    onButtonTabSelect: id => setSelectedId(id)
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "1",
+    iconType: "duotone",
+    iconName: "bus-school"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "2",
+    iconType: "duotone",
+    iconName: "train-tram"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "3",
+    iconType: "duotone",
+    iconName: "plane-arrival"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "4",
+    iconType: "duotone",
+    iconName: "shuttle-space"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "5",
+    iconType: "duotone",
+    iconName: "jet-fighter"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "6",
+    iconType: "duotone",
+    iconName: "banana",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "7",
+    iconType: "duotone",
+    iconName: "citrus",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "8",
+    iconType: "duotone",
+    iconName: "pineapple"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "9",
+    iconType: "duotone",
+    iconName: "lemon"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "10",
+    iconType: "duotone",
+    iconName: "pie"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "11",
+    iconType: "duotone",
+    iconName: "pear"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "12",
+    iconType: "duotone",
+    iconName: "grapes"
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "13",
+    iconType: "duotone",
+    iconName: "mango",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "14",
+    iconType: "duotone",
+    iconName: "avocado",
+    disabled: true
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "15",
+    iconType: "duotone",
+    iconName: "leaf"
+  })));
+};
+exports._IconOnlyWrapped = _IconOnlyWrapped;
+_IconOnlyWrapped.args = {
+  selectedButtonTabId: '5',
+  wrapAfter: 8
+};
+const _Wrapped = args => {
+  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
+  const onButtonTabSelectHandler = (id, e) => {
+    args.onButtonTabSelect && args.onButtonTabSelect(id, e);
+    setSelectedId(id);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ButtonTabsStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_ButtonTabs.ButtonTabs, _extends({}, args, {
+    classNames: {
+      wrapper: _ButtonTabsStoriesModule.default.wrapper
+    },
+    onButtonTabSelect: onButtonTabSelectHandler,
+    selectedButtonTabId: selectedId
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "1",
+    iconType: "duotone",
+    iconName: "bus-school"
+  }, "School Bus"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "2",
+    iconType: "duotone",
+    iconName: "train-tram"
+  }, "Tram Train"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "3",
+    iconType: "duotone",
+    iconName: "plane-arrival"
+  }, "Airplane Arrival"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "4",
+    iconType: "duotone",
+    iconName: "shuttle-space"
+  }, "Space Shuttle"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "5",
+    iconType: "duotone",
+    iconName: "jet-fighter"
+  }, "Fighter Jet")));
+};
+exports._Wrapped = _Wrapped;
+_Wrapped.args = {
+  selectedButtonTabId: '4',
+  wrapAfter: 3
+};
+const _DisabledButtons = args => {
+  const [selectedId, setSelectedId] = React.useState(args.selectedButtonTabId);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ButtonTabsStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_ButtonTabs.ButtonTabs, _extends({}, args, {
+    selectedButtonTabId: selectedId,
+    classNames: {
+      wrapper: _ButtonTabsStoriesModule.default.wrapper
+    },
+    onButtonTabSelect: id => setSelectedId(id)
+  }), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "1"
+  }, "School Bus"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "2",
+    disabled: true
+  }, "Tram Train"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "3",
+    disabled: true
+  }, "Airplane Arrival"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "4"
+  }, "Space Shuttle"), /*#__PURE__*/React.createElement(_ButtonTab.ButtonTab, {
+    id: "5"
+  }, "Fighter Jet")));
+};
+exports._DisabledButtons = _DisabledButtons;
+_DisabledButtons.args = {
+  selectedButtonTabId: '4'
+};

package/lib/components/ButtonTabs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ButtonTab';
+export * from './ButtonTabs';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ButtonTabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonTabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/lib/components/Card/Card.d.ts

@@ -0,0 +1,37 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export declare const PADDING_SIZES: Readonly<{
+    small: "small";
+    medium: "medium";
+    large: "large";
+    none: "none";
+}>;
+export type PaddingSizeType = typeof PADDING_SIZES[keyof typeof PADDING_SIZES];
+export type CardProps = {
+    classNames?: ClassNames;
+    children: React.ReactNode;
+    paddingTop?: PaddingSizeType;
+    paddingRight?: PaddingSizeType;
+    paddingBottom?: PaddingSizeType;
+    paddingLeft?: PaddingSizeType;
+};
+export type CardChildProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+export type ClickableCardProps = ((CardProps) & {
+    onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    disabled?: boolean;
+});
+export declare const CardHeader: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardTitle: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardActions: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardFooter: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
+export declare const CardContent: ({ className, children, ...props }: CardChildProps) => React.JSX.Element;
+export declare const Card: Flow.AbstractComponent<CardProps, HTMLDivElement>;
+export declare const ClickableCard: Flow.AbstractComponent<ClickableCardProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/lib/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;EAKxB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,OAAO,aAAa,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,SAAS,CAAC,GAAG;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAQH,eAAO,MAAM,UAAU,GACrB,mCAIG,cAAc,sBAGZ,CAAC;AAER,eAAO,MAAM,SAAS,GACpB,mCAIG,cAAc,sBAGZ,CAAC;AAER,eAAO,MAAM,WAAW,GACtB,mCAIG,cAAc,sBAGZ,CAAC;AAER,eAAO,MAAM,UAAU,GACrB,mCAIG,cAAc,sBAGZ,CAAC;AAER,eAAO,MAAM,WAAW,GACtB,mCAIG,cAAc,sBAGZ,CAAC;AAER,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CAyBzD,CAAC;AAEX,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,cAAc,CA6CnF,CAAC"}

package/lib/components/Card/Card.js

@@ -20,6 +20,7 @@ const PADDING_SIZES = exports.PADDING_SIZES = Object.freeze({
 });
 const getPaddingValue = size => {
   const spaceKey = 'space' + (0, _string.capitalize)(size);
+  // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("/Users/diwaker/SpacedOut/ui-design-system/src/styles/variables/_space")'.
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
 const CardHeader = _ref => {
@@ -107,9 +108,11 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
     ...props
   } = _ref7;
   const componentRef = React.useRef(null);
+  // @ts-ignore - TS2322 - Type 'null' is not assignable to type 'HTMLDivElement'.
   React.useImperativeHandle(ref, () => componentRef.current);
   React.useEffect(() => {
     if (disabled) {
+      // @ts-ignore - TS2339 - Property 'blur' does not exist on type 'never'.
       componentRef.current?.blur();
     }
   }, [disabled]);
@@ -128,7 +131,9 @@ const ClickableCard = exports.ClickableCard = /*#__PURE__*/React.forwardRef((_re
       wrapper: (0, _classify.default)(_CardModule.default.clickableCard, {
         [_CardModule.default.disabled]: disabled
       }, classNames?.wrapper)
-    },
+    }
+    // @ts-ignore - TS2322 - Type '{ classNames: { wrapper: string; }; tabIndex: number; onClick: (e: any) => void; onKeyDown: (e: any) => void; ref: ForwardedRef<HTMLDivElement>; children: React.ReactNode; paddingTop?: string | undefined; paddingRight?: string | undefined; paddingBottom?: string | undefined; paddingLeft?: string | undefined; }' is not assignable to type 'IntrinsicAttributes & CardProps & RefAttributes<HTMLDivElement>'.
+    ,
     tabIndex: disabled ? -1 : 0,
     onClick: onClickHandler,
     onKeyDown: onKeyDownHandler,