@invoicebox/ui 0.1.0-alpha.82 → 0.1.0-alpha.84

package/dist/components/common/BgCard/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+export type TProps = {
+    children: ReactNode;
+    isTopLeftBorderRadius?: boolean;
+};
+export declare const BgCard: FC<TProps>;

package/dist/components/common/BgCard/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BgCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var BgCard = exports.BgCard = function BgCard(_ref) {
+  var children = _ref.children,
+    _ref$isTopLeftBorderR = _ref.isTopLeftBorderRadius,
+    isTopLeftBorderRadius = _ref$isTopLeftBorderR === void 0 ? true : _ref$isTopLeftBorderR;
+  var palette = (0, _palette.useComponentPalette)('bgCard');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    $palette: palette,
+    $isTopLeftBorderRadius: isTopLeftBorderRadius
+  }, children);
+};

package/dist/components/common/BgCard/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BgCard, TProps } from '.';
+declare const meta: Meta<typeof BgCard>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/common/BgCard/index.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var meta = {
+  title: 'common/BgCard',
+  component: _.BgCard,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {
+    children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", null, "Some children"), /*#__PURE__*/_react["default"].createElement("div", null, "Some children")),
+    isTopLeftBorderRadius: true
+  }
+};

package/dist/components/common/BgCard/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TBgCardPalette = {
+    bg: string;
+};
+export declare const generateBgCardPalette: (abstractPalette: TAbstractPalette) => TBgCardPalette;

package/dist/components/common/BgCard/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateBgCardPalette = void 0;
+var generateBgCardPalette = exports.generateBgCardPalette = function generateBgCardPalette(abstractPalette) {
+  return {
+    bg: abstractPalette.base
+  };
+};

package/dist/components/common/BgCard/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TBgCardPalette } from './palette';
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $palette: TBgCardPalette;
+    $isTopLeftBorderRadius: boolean;
+}>>;

package/dist/components/common/BgCard/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _breakpoints = require("../../../breakpoints");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1vrvxit-0"
+})(["background-color:", ";position:relative;border-radius:20px;padding:30px;", " @media ", "{padding:16px;}"], function (_ref) {
+  var $palette = _ref.$palette;
+  return $palette.bg;
+}, function (_ref2) {
+  var $isTopLeftBorderRadius = _ref2.$isTopLeftBorderRadius;
+  return !$isTopLeftBorderRadius && (0, _styledComponents.css)(["border-top-left-radius:0px;"]);
+}, _breakpoints.breakpoints.md);

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export type { TProps as TCountrySelectProps } from './components/form/CountrySel
 export { PhoneInput } from './components/form/PhoneInput';
 export type { TProps as TPhoneInputProps } from './components/form/PhoneInput';
 export { phoneLogic } from './components/form/PhoneInput/externalPhoneLogic';
+export { BgCard } from './components/common/BgCard';
 export { PaletteProvider, defaultAbstractPalette } from './palette';
 export type { TAbstractPalette } from './palette';
 export { useOutsideClick } from './hooks/useOutsideClick';

package/dist/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Arrow", {
     return _Arrow.Arrow;
   }
 });
+Object.defineProperty(exports, "BgCard", {
+  enumerable: true,
+  get: function get() {
+    return _BgCard.BgCard;
+  }
+});
 Object.defineProperty(exports, "Calendar", {
   enumerable: true,
   get: function get() {
@@ -186,6 +192,7 @@ var _Flag = require("./components/common/Flag");
 var _CountrySelect = require("./components/form/CountrySelect");
 var _PhoneInput = require("./components/form/PhoneInput");
 var _externalPhoneLogic = require("./components/form/PhoneInput/externalPhoneLogic");
+var _BgCard = require("./components/common/BgCard");
 var _palette = require("./palette");
 var _useOutsideClick = require("./hooks/useOutsideClick");
 var _useInputFocus = require("./hooks/useInputFocus");

package/dist/palette/context.d.ts

@@ -14,6 +14,7 @@ import { TDividerPalette } from '../components/common/Divider/palette';
 import { TCalendarPalette } from '../components/common/Calendar/palette';
 import { TSearchInputPalette } from '../components/form/SearchInput/palette';
 import { TCountrySelectPalette } from '../components/form/CountrySelect/palette';
+import { TBgCardPalette } from '../components/common/BgCard/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -30,6 +31,7 @@ type TContext = {
     warningIcon: TWarningIconPalette;
     divider: TDividerPalette;
     calendar: TCalendarPalette;
+    bgCard: TBgCardPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -21,6 +21,7 @@ var _palette12 = require("../components/common/Divider/palette");
 var _palette13 = require("../components/common/Calendar/palette");
 var _palette14 = require("../components/form/SearchInput/palette");
 var _palette15 = require("../components/form/CountrySelect/palette");
+var _palette16 = require("../components/common/BgCard/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -36,5 +37,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   dateInput: (0, _palette10.generateDateInputPalette)(_constants.defaultAbstractPalette),
   warningIcon: (0, _palette11.generateWarningIconPalette)(_constants.defaultAbstractPalette),
   divider: (0, _palette12.generateDividerPalette)(_constants.defaultAbstractPalette),
-  calendar: (0, _palette13.generateCalendarPalette)(_constants.defaultAbstractPalette)
+  calendar: (0, _palette13.generateCalendarPalette)(_constants.defaultAbstractPalette),
+  bgCard: (0, _palette16.generateBgCardPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -22,6 +22,7 @@ var _palette12 = require("../components/common/Divider/palette");
 var _palette13 = require("../components/common/Calendar/palette");
 var _palette14 = require("../components/form/SearchInput/palette");
 var _palette15 = require("../components/form/CountrySelect/palette");
+var _palette16 = require("../components/common/BgCard/palette");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -56,7 +57,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       dateInput: (0, _palette10.generateDateInputPalette)(mergedAbstractPalette),
       warningIcon: (0, _palette11.generateWarningIconPalette)(mergedAbstractPalette),
       divider: (0, _palette12.generateDividerPalette)(mergedAbstractPalette),
-      calendar: (0, _palette13.generateCalendarPalette)(mergedAbstractPalette)
+      calendar: (0, _palette13.generateCalendarPalette)(mergedAbstractPalette),
+      bgCard: (0, _palette16.generateBgCardPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -14,4 +14,5 @@ export declare const usePalette: () => {
     warningIcon: import("../components/common/WarningIcon/palette").TWarningIconPalette;
     divider: import("../components/common/Divider/palette").TDividerPalette;
     calendar: import("../components/common/Calendar/palette").TCalendarPalette;
+    bgCard: import("../components/common/BgCard/palette").TBgCardPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.82",
+    "version": "0.1.0-alpha.84",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {