@invoicebox/ui 0.1.0-alpha.177 → 0.1.0-alpha.179

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

@@ -7,6 +7,7 @@ type TDialogCommonProps = {
     isOpen: boolean;
     isPadding?: boolean;
     overflow?: string;
+    borderColor?: string;
 };
 export type TProps = TDialogCommonProps & {
     initialFocusRef?: React.RefObject<HTMLElement> | false;

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

@@ -21,7 +21,8 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
     _ref$isPadding = _ref.isPadding,
     isPadding = _ref$isPadding === void 0 ? true : _ref$isPadding,
     initialFocusRef = _ref.initialFocusRef,
-    overflow = _ref.overflow;
+    overflow = _ref.overflow,
+    borderColor = _ref.borderColor;
   var palette = (0, _palette.useComponentPalette)('drawer');
   return /*#__PURE__*/_react["default"].createElement(S.BottomSheet, {
     open: isOpen,
@@ -41,6 +42,7 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
     $overflow: overflow,
     $isPadding: isPadding,
     $isErrorBorder: isErrorBorder,
-    $errorColor: palette.error
+    $errorColor: palette.error,
+    $borderColor: borderColor
   }, children));
 };

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

@@ -49,7 +49,8 @@ var commonArgs = {
   children: 'Children',
   isErrorBorder: false,
   onClose: (0, _addonActions.action)('close'),
-  isPadding: false
+  isPadding: false,
+  borderColor: undefined
 };
 var Default = exports.Default = {
   args: commonArgs,

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

@@ -56,4 +56,5 @@ export declare const Body: import("styled-components/dist/types").IStyledCompone
     $isPadding: boolean;
     $errorColor: string;
     $overflow?: string | undefined;
+    $borderColor?: string | undefined;
 }>> & string;

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

@@ -44,8 +44,9 @@ var Body = exports.Body = _styledComponents["default"].div.withConfig({
   return $overflow || 'auto';
 }, function (_ref8) {
   var $isErrorBorder = _ref8.$isErrorBorder,
-    $errorColor = _ref8.$errorColor;
-  return $isErrorBorder && "border-top: 2px solid ".concat($errorColor, ";");
+    $errorColor = _ref8.$errorColor,
+    $borderColor = _ref8.$borderColor;
+  return ($isErrorBorder || $borderColor) && (0, _styledComponents.css)(["border-top:2px solid ", ";"], $borderColor || $errorColor);
 }, function (_ref9) {
   var $isPadding = _ref9.$isPadding;
   return $isPadding && 'padding: 32px 16px 36px';

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

@@ -0,0 +1 @@
+export declare const PointsLoader: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"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.PointsLoader = 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 && {}.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(e) { return e && e.__esModule ? e : { "default": e }; }
+var points = new Array(3).fill('').map(function (item, index) {
+  return index;
+});
+var PointsLoader = exports.PointsLoader = function PointsLoader() {
+  var palette = (0, _palette.useComponentPalette)('pointsLoader');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, null, points.map(function (pointItem) {
+    return /*#__PURE__*/_react["default"].createElement(S.Point, {
+      key: pointItem,
+      $activeColor: palette.active,
+      $defaultColor: palette["default"]
+    });
+  }));
+};

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

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/react';
+import { PointsLoader } from '.';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+};
+export default meta;
+export declare const Default: StoryObj<typeof PointsLoader>;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _ = require(".");
+var meta = {
+  title: 'common/PointsLoader',
+  component: _.PointsLoader,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {}
+};

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

@@ -0,0 +1,6 @@
+import { TAbstractPalette } from '../../../palette';
+export type TPointsLoaderPalette = {
+    active: string;
+    default: string;
+};
+export declare const generatePointsLoaderPalette: (abstractPalette: TAbstractPalette) => TPointsLoaderPalette;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePointsLoaderPalette = void 0;
+var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var generatePointsLoaderPalette = exports.generatePointsLoaderPalette = function generatePointsLoaderPalette(abstractPalette) {
+  return {
+    active: abstractPalette.primary,
+    "default": (0, _hexToRgba["default"])(abstractPalette.primary, 0.2)
+  };
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Point: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $activeColor: string;
+    $defaultColor: string;
+}>> & string;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Point = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-epi71s-0"
+})(["display:flex;align-items:center;gap:12px;height:18px;padding:6px;"]);
+var Point = exports.Point = _styledComponents["default"].div.withConfig({
+  displayName: "styles__Point",
+  componentId: "sc-epi71s-1"
+})(["background-color:", ";@keyframes colorChange{0%,100%{background-color:", ";}33%{background-color:", ";}66%{background-color:", ";}}width:6px;height:6px;border-radius:50%;animation:colorChange 3s infinite;&:nth-child(2){animation-delay:1s;}&:nth-child(3){animation-delay:2s;}"], function (_ref) {
+  var $defaultColor = _ref.$defaultColor;
+  return $defaultColor;
+}, function (_ref2) {
+  var $defaultColor = _ref2.$defaultColor;
+  return $defaultColor;
+}, function (_ref3) {
+  var $activeColor = _ref3.$activeColor;
+  return $activeColor;
+}, function (_ref4) {
+  var $defaultColor = _ref4.$defaultColor;
+  return $defaultColor;
+});

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { Select } from './components/form/Select';
 export type { TProps as TSelectProps } from './components/form/Select';
 export { Toggle } from './components/form/Toggle';
 export type { TProps as TToggleProps } from './components/form/Toggle';
+export { PointsLoader } from './components/common/PointsLoader';
 export { Calendar } from './components/common/Calendar';
 export type { TProps as TCalendarProps } from './components/common/Calendar';
 export { DateInput } from './components/form/DateInput';

package/dist/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "PhoneInput", {
     return _PhoneInput.PhoneInput;
   }
 });
+Object.defineProperty(exports, "PointsLoader", {
+  enumerable: true,
+  get: function get() {
+    return _PointsLoader.PointsLoader;
+  }
+});
 Object.defineProperty(exports, "PositiveIntegerInput", {
   enumerable: true,
   get: function get() {
@@ -337,6 +343,7 @@ var _EntityAutocompleteOptionsDrawer = require("./components/common/EntityAutoco
 var _Scrollbar = require("./components/common/Scrollbar");
 var _Select = require("./components/form/Select");
 var _Toggle = require("./components/form/Toggle");
+var _PointsLoader = require("./components/common/PointsLoader");
 var _Calendar = require("./components/common/Calendar");
 var _DateInput = require("./components/form/DateInput");
 var _WarningIcon = require("./components/common/WarningIcon");

package/dist/palette/context.d.ts

@@ -25,6 +25,7 @@ import { TCodeInputPalette } from '../components/form/CodeInput/palette';
 import { TResetButtonPalette } from '../components/form/ResetButton/palette';
 import { TTogglePalette } from '../components/form/Toggle/palette';
 import { TReadOnlyLabelValueFieldPalette } from '../components/common/ReadOnlyLabelValueField/palette';
+import { TPointsLoaderPalette } from '../components/common/PointsLoader/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -52,6 +53,7 @@ type TContext = {
     resetButton: TResetButtonPalette;
     toggle: TTogglePalette;
     readOnlyLabelValueField: TReadOnlyLabelValueFieldPalette;
+    pointsLoader: TPointsLoaderPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -32,6 +32,7 @@ var _palette23 = require("../components/form/CodeInput/palette");
 var _palette24 = require("../components/form/ResetButton/palette");
 var _palette25 = require("../components/form/Toggle/palette");
 var _palette26 = require("../components/common/ReadOnlyLabelValueField/palette");
+var _palette27 = require("../components/common/PointsLoader/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -58,5 +59,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   codeInput: (0, _palette23.generateCodeInputPalette)(_constants.defaultAbstractPalette),
   resetButton: (0, _palette24.generateResetButtonPalette)(_constants.defaultAbstractPalette),
   toggle: (0, _palette25.generateTogglePalette)(_constants.defaultAbstractPalette),
-  readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(_constants.defaultAbstractPalette)
+  readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(_constants.defaultAbstractPalette),
+  pointsLoader: (0, _palette27.generatePointsLoaderPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -33,6 +33,7 @@ var _palette23 = require("../components/form/CodeInput/palette");
 var _palette24 = require("../components/form/ResetButton/palette");
 var _palette25 = require("../components/form/Toggle/palette");
 var _palette26 = require("../components/common/ReadOnlyLabelValueField/palette");
+var _palette27 = require("../components/common/PointsLoader/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 && {}.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); }
@@ -78,7 +79,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       codeInput: (0, _palette23.generateCodeInputPalette)(mergedAbstractPalette),
       resetButton: (0, _palette24.generateResetButtonPalette)(mergedAbstractPalette),
       toggle: (0, _palette25.generateTogglePalette)(mergedAbstractPalette),
-      readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(mergedAbstractPalette)
+      readOnlyLabelValueField: (0, _palette26.generateReadOnlyLabelValueFieldPalette)(mergedAbstractPalette),
+      pointsLoader: (0, _palette27.generatePointsLoaderPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -25,4 +25,5 @@ export declare const usePalette: () => {
     resetButton: import("../components/form/ResetButton/palette").TResetButtonPalette;
     toggle: import("../components/form/Toggle/palette").TTogglePalette;
     readOnlyLabelValueField: import("../components/common/ReadOnlyLabelValueField/palette").TReadOnlyLabelValueFieldPalette;
+    pointsLoader: import("../components/common/PointsLoader/palette").TPointsLoaderPalette;
 };

package/package.json

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