@thecb/components 6.3.1-beta.8 → 7.0.0

package/README.md

@@ -70,7 +70,7 @@ Any components used in a Typescript app need a declaration file.
 1. Create a `index.d.ts` file in the directory for that component that exports the typed component constant.
    Use the `Expand` interface found in `./src/util/expand` so the full props will appear on hover in VSCode. Extend `React.HTMLAttributes<HTMLElement>>` to add all html props and event handlers. e.g.:
 
-```
+```ts
 import React from "react";
 import Expand from "../../../util/expand";
 
@@ -87,12 +87,12 @@ export interface ButtonWithActionProps {
 }
 
 export const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
-React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement>>;
 ```
 
 2. Export the component from the `index.d.ts` in the top-level directory for your component, i.e. `src/components/atoms/index.d.ts`. e.g:
 
-```
+```ts
 ...
 export * from "./button-with-action";
 ...
@@ -172,3 +172,7 @@ You can alias the component by
 To import multiple components
 
 - `import { ButtonWithAction, LoginForm, Box, Stack, Cluster } from "@thecb/components";`
+
+```
+
+```

package/dist/index.cjs.js

@@ -22729,7 +22729,7 @@ var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
 
 */
 
-var useOutsideClickHook$1 = function useOutsideClickHook(handler) {
+var useOutsideClickHook = function useOutsideClickHook(handler) {
   var ref = React.useRef();
   React.useEffect(function () {
   }, [ref]);
@@ -22744,7 +22744,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook$1
+  useOutsideClick: useOutsideClickHook
 });
 
 var hoverColor$4 = "#116285";
@@ -22816,9 +22816,7 @@ var Popover = function Popover(_ref) {
     }
   };
 
-  var triggerRef = useOutsideClickHook(function () {
-    return handleTogglePopover(false);
-  });
+  var triggerRef = useOutsideClickHook();
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -34999,10 +34997,10 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "2px",
+      right: "1px",
       top: "2px",
       bottom: "2px",
-      left: "24px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
@@ -35054,7 +35052,8 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     extraStyles: labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
   }, /*#__PURE__*/React__default.createElement(Center, null, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "stretch",
-    align: "center"
+    align: "center",
+    overflow: "visible"
   }, /*#__PURE__*/React__default.createElement(Cover, {
     minHeight: "100%",
     singleChild: true
@@ -35330,6 +35329,45 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
+var shineFrames = styled.keyframes(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
+var LoadingPill = styled__default.div.withConfig({
+  displayName: "LoadingPillstyled__LoadingPill",
+  componentId: "sc-kn9rtt-0"
+})(["width:", "px;background-color:", ";margin:", ";height:", ";border-radius:16px;background-image:linear-gradient( 135deg,", " 0%,", " 40%,", " 60%,", " 100% );background-size:400%;animation:", " 2s infinite ease-in-out;animation-direction:reverse;"], function (_ref) {
+  var width = _ref.width;
+  return width;
+}, SEASHELL_WHITE, function (_ref2) {
+  var margin = _ref2.margin;
+  return margin;
+}, function (_ref3) {
+  var height = _ref3.height;
+  return height;
+}, SEASHELL_WHITE, ALABASTER_WHITE, SEASHELL_WHITE, SEASHELL_WHITE, shineFrames);
+
+var LoadingLine = function LoadingLine(_ref) {
+  var minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      _ref$exactWidth = _ref.exactWidth,
+      exactWidth = _ref$exactWidth === void 0 ? null : _ref$exactWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "16px" : _ref$height,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? "0px" : _ref$margin;
+  return /*#__PURE__*/React__default.createElement(LoadingPill, {
+    margin: margin,
+    height: height,
+    width: exactWidth || Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth
+  });
+};
+
 const validatorToPredicate = (validatorFn, emptyCase) => (
   value,
   ...rest
@@ -37930,7 +37968,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
   }), /*#__PURE__*/React__default.createElement(NavFooter, {
     backgroundColor: themeValues.subfooterBackgroundColor,
     footerMinHeight: "45px",
-    footerPadding: "0 1rem",
+    footerPadding: "0 16px",
     "aria-label": "subfooter",
     leftContent: leftSubfooterContent,
     rightContent: rightSubfooterContent
@@ -46667,14 +46705,6 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$M));
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
 exports.AccountNumberImage = AccountNumberImage;
 exports.AccountsAddIcon = AccountsAddIcon$1;
 exports.AccountsIcon = AccountsIcon$1;
@@ -46755,6 +46785,7 @@ exports.Jumbo = Jumbo$1;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;
 exports.Loading = Loading;
+exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;
 exports.Modal = Modal$1;
 exports.Module = Module$1;