oolib 2.203.2 → 2.204.1

package/dist/components/LoadersAndProgress/SkeletonLoader/styled.js

@@ -44,6 +44,6 @@ var themes_1 = require("../../../v2/themes");
 var load = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { left: -100%; }\n  to { left: 100%; }\n"], ["\n  from { left: -100%; }\n  to { left: 100%; }\n"])));
 exports.StyledSkeletonLoader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow: hidden;\n  position: relative;\n  background-color: ", ";\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: -100%;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n    animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n    animation-iteration-count: infinite;\n  }\n"], ["\n  overflow: hidden;\n  position: relative;\n  background-color: ", ";\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: -100%;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(to right, transparent 0%, ", " 50%, transparent 100%);\n    animation: ", " 1s cubic-bezier(0.4, 0.0, 0.2, 1);\n    animation-iteration-count: infinite;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
+    return (0, getDynamicColors_1.getSurfaceContainer)(theme === null || theme === void 0 ? void 0 : theme.colors);
 }, themes_1.colors.grey5, load);
 var templateObject_1, templateObject_2;

package/dist/components/LoadersAndProgress/TextLoader/index.js

@@ -18,7 +18,7 @@ exports.TextLoader = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_1 = require("../SkeletonLoader/styled");
 var styled_components_1 = require("styled-components");
-var utilsOolib_1 = require("../../../utilsOolib");
+var getDynamicColors_1 = require("../../../v2/themes/utils/getDynamicColors");
 /**
  * @component Renders a text loader component with customizable styling.
  *
@@ -29,6 +29,6 @@ var utilsOolib_1 = require("../../../utilsOolib");
 var TextLoader = function (_a) {
     var style = _a.style;
     var theme = (0, styled_components_1.useTheme)();
-    return (react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: __assign(__assign({ backgroundColor: (0, utilsOolib_1.getPrimaryColor10)(theme === null || theme === void 0 ? void 0 : theme.colors) }, (style || {})), { width: (style === null || style === void 0 ? void 0 : style.width) || "8rem", height: (style === null || style === void 0 ? void 0 : style.height) || "1.5rem" }) }));
+    return (react_1.default.createElement(styled_1.StyledSkeletonLoader, { style: __assign(__assign({ backgroundColor: (0, getDynamicColors_1.getSecondaryContainer)(theme === null || theme === void 0 ? void 0 : theme.colors) }, (style || {})), { width: (style === null || style === void 0 ? void 0 : style.width) || "8rem", height: (style === null || style === void 0 ? void 0 : style.height) || "1.5rem", borderRadius: '4px' }) }));
 };
 exports.TextLoader = TextLoader;

package/dist/components/LoadersAndProgress/utils/index.d.ts

@@ -1,7 +1,7 @@
-import { SANS_3, SANS_4_5, SANS_2 } from "../../Typo";
+import { UI_BODY_DF, UI_BODY_SM_DF, UI_TITLE } from "../../../v2/components/Typo2";
 export type LoaderSize = 'L' | 'S' | 'M';
 export interface DimensionResult {
-    TypoComp: typeof SANS_3 | typeof SANS_4_5 | typeof SANS_2;
+    TypoComp: typeof UI_BODY_DF | typeof UI_BODY_SM_DF | typeof UI_TITLE;
     trackThickness: number;
     diameter: number;
 }

package/dist/components/LoadersAndProgress/utils/index.js

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTypoAndLoaderDimensions = void 0;
-var Typo_1 = require("../../Typo");
+var Typo2_1 = require("../../../v2/components/Typo2");
 var getTypoAndLoaderDimensions = function (size) {
     if (size === void 0) { size = 'M'; }
     switch (size) {
         case 'L':
-            return { TypoComp: Typo_1.SANS_4_5, trackThickness: 10, diameter: 70 };
+            return { TypoComp: Typo2_1.UI_TITLE, trackThickness: 10, diameter: 70 };
         case 'S':
-            return { TypoComp: Typo_1.SANS_2, trackThickness: 3.65, diameter: 21.35 };
+            return { TypoComp: Typo2_1.UI_BODY_SM_DF, trackThickness: 3.65, diameter: 21.35 };
         case 'M':
         default:
-            return { TypoComp: Typo_1.SANS_3, trackThickness: 7, diameter: 43 };
+            return { TypoComp: Typo2_1.UI_BODY_DF, trackThickness: 7, diameter: 43 };
     }
 };
 exports.getTypoAndLoaderDimensions = getTypoAndLoaderDimensions;

package/dist/v2/components/TextInputs/derivedComps/PhoneInput.d.ts

@@ -1,5 +1,7 @@
-export function PhoneInput({ passValidationErrorToFormValidation, ...props }: {
+export function PhoneInput({ passValidationErrorToFormValidation, minPhoneNoLength, maxPhoneNoLength, ...props }: {
     [x: string]: any;
     passValidationErrorToFormValidation: any;
+    minPhoneNoLength?: number;
+    maxPhoneNoLength?: number;
 }): React.JSX.Element;
 import React from "react";

package/dist/v2/components/TextInputs/derivedComps/PhoneInput.js

@@ -29,7 +29,7 @@ exports.PhoneInput = void 0;
 var react_1 = __importDefault(require("react"));
 var __1 = require("..");
 var PhoneInput = function (_a) {
-    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
+    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, _b = _a.minPhoneNoLength, minPhoneNoLength = _b === void 0 ? 9 : _b, _c = _a.maxPhoneNoLength, maxPhoneNoLength = _c === void 0 ? 11 : _c, props = __rest(_a, ["passValidationErrorToFormValidation", "minPhoneNoLength", "maxPhoneNoLength"]);
     var handleValidation = function (value) {
         var errorObj;
         if (isNaN(value)) {
@@ -38,7 +38,7 @@ var PhoneInput = function (_a) {
                 passValidationErrorToFormValidation(errorObj.type);
             return errorObj;
         }
-        if (value.length < 9) {
+        if (value.length < minPhoneNoLength) {
             errorObj = { type: "error", msg: "Enter a valid phone number" };
             if (passValidationErrorToFormValidation)
                 passValidationErrorToFormValidation(errorObj.type);
@@ -48,6 +48,6 @@ var PhoneInput = function (_a) {
         if (passValidationErrorToFormValidation)
             passValidationErrorToFormValidation("success");
     };
-    return (react_1.default.createElement(__1.TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 11 }, props)));
+    return (react_1.default.createElement(__1.TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: maxPhoneNoLength }, props)));
 };
 exports.PhoneInput = PhoneInput;

package/dist/v2/themes/utils/getDynamicColors.d.ts

@@ -2,42 +2,56 @@ import { Colors2Type } from "../colors";
 /**
 * Get the primary Container color.
 *
-* @param {ColorsType} colors - Optional colors object
+* @param {Colors2Type} colors - Optional colors object
 * @return {string} The primary color text
 */
 export declare const getPrimaryContainer: (colors?: Colors2Type) => string;
 /**
-*  Get the secondary Container color.
+* Get the secondary Container color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The secondary color text
 */
 export declare const getSecondaryContainer: (colors?: Colors2Type) => string;
 /**
 * get the tertiary Container color..
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The tertiary color text
 */
 export declare const getTertiaryContainer: (colors?: Colors2Type) => string;
 /**
 * Get the onPrimary color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The onPrimary color text
 */
 export declare const getOnPrimary: (colors?: Colors2Type) => string;
 /**
 * Get the onSecondary color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The onSecondary color text
 */
 export declare const getOnSecondary: (colors?: Colors2Type) => string;
 /**
 * Get the onTertiary color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The onTertiary color text
 */
 export declare const getOnTertiary: (colors?: Colors2Type) => string;
+/**
+* Get the surface Container color.
+*
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The surface container color text
+*/
+export declare const getSurfaceContainer: (colors?: Colors2Type) => string;
+/**
+* Get the surface Container Low color.
+*
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The surface container low color text
+*/
+export declare const getSurfaceContainerLow: (colors?: Colors2Type) => string;

package/dist/v2/themes/utils/getDynamicColors.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOnTertiary = exports.getOnSecondary = exports.getOnPrimary = exports.getTertiaryContainer = exports.getSecondaryContainer = exports.getPrimaryContainer = void 0;
+exports.getSurfaceContainerLow = exports.getSurfaceContainer = exports.getOnTertiary = exports.getOnSecondary = exports.getOnPrimary = exports.getTertiaryContainer = exports.getSecondaryContainer = exports.getPrimaryContainer = void 0;
 var colors_1 = require("../colors");
-var primaryContainer = colors_1.colors.primaryContainer, secondaryContainer = colors_1.colors.secondaryContainer, tertiaryContainer = colors_1.colors.tertiaryContainer, onPrimary = colors_1.colors.onPrimary, onSecondary = colors_1.colors.onSecondary, onTertiary = colors_1.colors.onTertiary;
+var primaryContainer = colors_1.colors.primaryContainer, secondaryContainer = colors_1.colors.secondaryContainer, tertiaryContainer = colors_1.colors.tertiaryContainer, onPrimary = colors_1.colors.onPrimary, onSecondary = colors_1.colors.onSecondary, onTertiary = colors_1.colors.onTertiary, surfaceContainer = colors_1.colors.surfaceContainer, surfaceContainerLow = colors_1.colors.surfaceContainerLow;
 /**
 * Get the primary Container color.
 *
-* @param {ColorsType} colors - Optional colors object
+* @param {Colors2Type} colors - Optional colors object
 * @return {string} The primary color text
 */
 var getPrimaryContainer = function (colors) {
@@ -14,10 +14,10 @@ var getPrimaryContainer = function (colors) {
 };
 exports.getPrimaryContainer = getPrimaryContainer;
 /**
-*  Get the secondary Container color.
+* Get the secondary Container color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The secondary color text
 */
 var getSecondaryContainer = function (colors) {
     return (colors === null || colors === void 0 ? void 0 : colors.secondaryContainer) || secondaryContainer;
@@ -26,8 +26,8 @@ exports.getSecondaryContainer = getSecondaryContainer;
 /**
 * get the tertiary Container color..
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The tertiary color text
 */
 var getTertiaryContainer = function (colors) {
     return (colors === null || colors === void 0 ? void 0 : colors.tertiaryContainer) || tertiaryContainer;
@@ -36,8 +36,8 @@ exports.getTertiaryContainer = getTertiaryContainer;
 /**
 * Get the onPrimary color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The onPrimary color text
 */
 var getOnPrimary = function (colors) {
     return (colors === null || colors === void 0 ? void 0 : colors.onPrimary) || onPrimary;
@@ -46,8 +46,8 @@ exports.getOnPrimary = getOnPrimary;
 /**
 * Get the onSecondary color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The onSecondary color text
 */
 var getOnSecondary = function (colors) {
     return (colors === null || colors === void 0 ? void 0 : colors.onSecondary) || onSecondary;
@@ -56,10 +56,30 @@ exports.getOnSecondary = getOnSecondary;
 /**
 * Get the onTertiary color.
 *
-* @param {ColorsType} colors - Optional colors object
-* @return {string} The primary color text
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The onTertiary color text
 */
 var getOnTertiary = function (colors) {
     return (colors === null || colors === void 0 ? void 0 : colors.onTertiary) || onTertiary;
 };
 exports.getOnTertiary = getOnTertiary;
+/**
+* Get the surface Container color.
+*
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The surface container color text
+*/
+var getSurfaceContainer = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.surfaceContainer) || surfaceContainer;
+};
+exports.getSurfaceContainer = getSurfaceContainer;
+/**
+* Get the surface Container Low color.
+*
+* @param {Colors2Type} colors - Optional colors object
+* @return {string} The surface container low color text
+*/
+var getSurfaceContainerLow = function (colors) {
+    return (colors === null || colors === void 0 ? void 0 : colors.surfaceContainerLow) || surfaceContainerLow;
+};
+exports.getSurfaceContainerLow = getSurfaceContainerLow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.203.2",
+  "version": "2.204.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",