oolib 2.177.0 → 2.177.2

package/dist/stories/v2/components/Dropdowns.stories.d.ts

@@ -0,0 +1,121 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace placeholder {
+            let name: string;
+        }
+        namespace optionIcon {
+            export { availableIcons as options };
+            export namespace control {
+                let type: string;
+            }
+        }
+        namespace selection {
+            let name_1: string;
+            export { name_1 as name };
+            export let options: string[];
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace size {
+            let name_2: string;
+            export { name_2 as name };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace mapping {
+                let Small: string;
+                let Medium: string;
+            }
+        }
+        namespace isSearchable {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace showIconInSelectArea {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        namespace optionImage {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        namespace optionDescription {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        namespace colors {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        namespace disabled {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        namespace readOnly {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        namespace invert {
+            let name_10: string;
+            export { name_10 as name };
+        }
+        namespace showColorInSelectArea {
+            let name_11: string;
+            export { name_11 as name };
+        }
+        namespace alignDropdown {
+            let name_12: string;
+            export { name_12 as name };
+            let options_2: string[];
+            export { options_2 as options };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+    }
+    namespace args {
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let size_1: string;
+        export { size_1 as size };
+        let selection_1: string;
+        export { selection_1 as selection };
+        let isSearchable_1: boolean;
+        export { isSearchable_1 as isSearchable };
+        let optionDescription_1: string;
+        export { optionDescription_1 as optionDescription };
+        let optionImage_1: string;
+        export { optionImage_1 as optionImage };
+        let optionIcon_1: any;
+        export { optionIcon_1 as optionIcon };
+        let showIconInSelectArea_1: boolean;
+        export { showIconInSelectArea_1 as showIconInSelectArea };
+        let colors_1: boolean;
+        export { colors_1 as colors };
+        let showColorInSelectArea_1: boolean;
+        export { showColorInSelectArea_1 as showColorInSelectArea };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let readOnly_1: boolean;
+        export { readOnly_1 as readOnly };
+        let invert_1: boolean;
+        export { invert_1 as invert };
+        export let popOutOfOverflowHiddenParent: boolean;
+        let alignDropdown_1: string;
+        export { alignDropdown_1 as alignDropdown };
+    }
+}
+export default _default;
+export function Dropdowns(args: any): React.JSX.Element;
+declare const availableIcons: string[];
+import React from "react";

package/dist/stories/v2/components/Dropdowns.stories.js

@@ -0,0 +1,289 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdowns = void 0;
+var react_1 = __importStar(require("react"));
+var Container_1 = require("../../../components/Container");
+var Paddings_1 = require("../../../components/Paddings");
+var themes_1 = require("../../../themes");
+var icons_1 = require("../../../icons");
+var DropdownMulti_1 = require("../../../v2/components/Dropdowns/DropdownMulti");
+var DropdownSingle_1 = require("../../../v2/components/Dropdowns/DropdownSingle");
+// import { faker } from '@faker-js/faker';
+// const generateRandomCountry = () => ({
+//   display: faker.address.country(),
+//   value: faker.address.countryCode().toLowerCase(),
+// });
+// const generateDropdownOptions = (length) => {
+//   const dropdownOptions = [];
+//   for (let i = 0; i < length; i++) {
+//     dropdownOptions.push(generateRandomCountry());
+//   }
+//   return dropdownOptions;
+// };
+// const dropdownOptions2 = generateDropdownOptions(200);
+var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
+exports.default = {
+    title: "Oolib V 2.0/Components/Dropdowns",
+    argTypes: {
+        // label: {
+        //   name: "Label",
+        // },
+        // sublabel: {
+        //   name: "Sub Label",
+        // },
+        placeholder: {
+            name: "Placeholder Text",
+        },
+        optionIcon: {
+            options: availableIcons,
+            control: { type: "select" },
+        },
+        selection: {
+            options: ["single", "multi"],
+            control: { type: "inline-radio" },
+        },
+        size: {
+            name: "Size",
+            control: { type: "inline-radio" },
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+        },
+        selection: {
+            name: "Selection Type",
+            options: ["single", "multi"],
+            control: { type: "select" },
+        },
+        isSearchable: {
+            name: "Searchable",
+        },
+        showIconInSelectArea: {
+            name: "Show Icon in Select Area",
+        },
+        optionImage: {
+            name: "Option Image",
+        },
+        optionDescription: {
+            name: "Option Description",
+        },
+        colors: {
+            name: 'Show Colors'
+        },
+        disabled: {
+            name: "Disabled",
+        },
+        readOnly: {
+            name: "Read Only",
+        },
+        invert: {
+            name: "Invert",
+        },
+        showColorInSelectArea: {
+            name: "Show Color in Select Area"
+        },
+        alignDropdown: {
+            name: "Align Dropdown",
+            options: ["left", "right"],
+            control: { type: "select" }
+        },
+    },
+    args: {
+        // label: "This is a label",
+        // sublabel: "This is a sub label",
+        placeholder: "",
+        size: "Medium",
+        selection: "single",
+        isSearchable: false,
+        optionDescription: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+        optionImage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrVSkmNOQ6abMCc5e6R2r7VwRZDkBHFTyzAg&usqp=CAU",
+        optionIcon: undefined,
+        showIconInSelectArea: false,
+        colors: false,
+        showColorInSelectArea: false,
+        disabled: false,
+        readOnly: false,
+        invert: false,
+        popOutOfOverflowHiddenParent: false,
+        alignDropdown: "left",
+    }
+};
+var dropdownOptions = [
+    {
+        display: "Option with a slightly longer name",
+        value: "india",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Sri Lanka",
+        value: "sriLanka",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Japan",
+        value: "japan",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Germany",
+        value: "germany",
+        color: themes_1.colors.primaryColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "USA",
+        value: "usa",
+        color: themes_1.colors.greyColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Columbia",
+        value: "columbia",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Brazil",
+        value: "brazil",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Australia",
+        value: "australia",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+];
+var Dropdowns = function (args) {
+    var _a = (0, react_1.useState)({
+        single: undefined,
+        multi: undefined,
+    }), val = _a[0], setVal = _a[1];
+    var _b = (0, react_1.useState)([]), options = _b[0], setOptions = _b[1];
+    (0, react_1.useEffect)(function () {
+        var delayOptions = setTimeout(function () {
+            var newOptions = dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); });
+            setOptions(newOptions);
+        }, 2000);
+        // Cleanup the timeout on component unmount
+        return function () { return clearTimeout(delayOptions); };
+    }, [args.optionDescription, args.optionImage, args.optionIcon, args.colors]);
+    var Comp = args.selection === "single" ? DropdownSingle_1.DropdownSingle : DropdownMulti_1.DropdownMulti;
+    return (react_1.default.createElement("div", { style: { background: args.invert && themes_1.colors.greyColor100 } },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
+                react_1.default.createElement(Comp, __assign({ key: args.selection }, args, { S: args.size == "S", options: dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); }), value: val[args.selection], onChange: function (k, v) {
+                        return setVal(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
+                        });
+                    }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent }))),
+            react_1.default.createElement("div", { style: { height: '1000px', background: 'red' } }))));
+};
+exports.Dropdowns = Dropdowns;
+// export const Button_Primary = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonPrimary} />
+// )
+// Button_Primary.parameters = { controls: { exclude: ['variant', 'color'] } }
+// export const Button_Secondary = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonSecondary} />
+// )
+// Button_Secondary.parameters = { controls: { exclude: ['variant', 'color'] } }
+// Button_Secondary.args = {
+//   active: false,
+// }
+// export const Button_Ghost = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonGhost} />
+// )
+// Button_Ghost.args = {
+//   active: false,
+// }
+// Button_Ghost.parameters = { controls: { exclude: ['variant'] } }
+// export const Button_Custom = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonCustom} />
+// )
+// Button_Custom.parameters = { controls: { exclude: ['variant', 'color'] } }
+// export const Google_Login = (args) => (
+//   <GenButtonStory args={args} Comp={GoogleLogin} />
+// )
+// Google_Login.parameters = {
+//   controls: { exclude: ['variant', 'color', 'iconOnly', 'icon + text'] },
+// }
+// export const Upload_Button = (args) => (
+//   <GenButtonStory args={{ ...args, children: 'Upload' }} Comp={UploadButton} />
+// )
+// Upload_Button.parameters = { controls: { exclude: ['color'] } }

package/dist/stories/v2/components/RadioButton.stories.d.ts

@@ -8,6 +8,8 @@ export namespace RadioList {
         let size: string;
         let listingStyle: string;
         let optionsLimit: number;
+        let label: string;
+        let sublabel: string;
         let option1: string;
         let option2: string;
         let option3: string;
@@ -170,7 +172,8 @@ export namespace RadioInput {
         export { disabled_2 as disabled };
         let invert_2: boolean;
         export { invert_2 as invert };
-        export let label: string;
+        let label_1: string;
+        export { label_1 as label };
     }
     export { args_1 as args };
     export namespace argTypes_1 {

package/dist/stories/v2/components/RadioButton.stories.js

@@ -63,7 +63,7 @@ var RadioList = function (args) {
         }
     }, [args.markOptions, args.corrrectOption]);
     return (React.createElement("div", { style: { backgroundColor: args.invert && greyColor100, padding: "4rem" } },
-        React.createElement(RadioAndCheckbox_1.RadioList, { options: options, readOnly: args.readOnly, value: chosenOption, onChange: function (id, val) { return setChosenOption(val); }, rightWrongResult: args.markOptions, label: args.label, listType: args.listingStyle, injectOtherOption: args.addOther, disabled: args.disabled, invert: args.invert, S: args.size == "S", commonIsCorrectDesc: args.feedbackMessage, optionsLimit: args.optionsLimit, saveValueAsString: args.saveValueAsString }),
+        React.createElement(RadioAndCheckbox_1.RadioList, { options: options, readOnly: args.readOnly, value: chosenOption, onChange: function (id, val) { return setChosenOption(val); }, rightWrongResult: args.markOptions, label: args.label, sublabel: args.sublabel, listType: args.listingStyle, injectOtherOption: args.addOther, disabled: args.disabled, invert: args.invert, S: args.size == "S", commonIsCorrectDesc: args.feedbackMessage, optionsLimit: args.optionsLimit, saveValueAsString: args.saveValueAsString }),
         React.createElement("br", null),
         " ",
         React.createElement(Divider_1.Divider, null),
@@ -80,7 +80,8 @@ exports.RadioList.args = {
     size: "Medium",
     listingStyle: "horizontal",
     optionsLimit: ops.length,
-    // label: '',
+    label: 'Please choose an option, this is a test.',
+    sublabel: 'Some supplimentary text to better explain the label',
     option1: ops[0].display,
     option2: ops[1].display,
     option3: ops[2].display,

package/dist/utils/comps/DisplayIcon/index.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, MouseEvent } from "react";
+import { FunctionComponent, MouseEvent, CSSProperties } from "react";
 import { icons } from "../../../icons";
 export interface DisplayIconProps {
     icon: keyof typeof icons;
@@ -6,6 +6,7 @@ export interface DisplayIconProps {
     color: string;
     weight?: "bold" | "regular";
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    style?: CSSProperties;
 }
 /**
  * @component Renders an icon component with customizable size, color, weight, and click handler.
@@ -16,6 +17,7 @@ export interface DisplayIconProps {
  * @prop {string} color: The color of the icon.
  * @prop {'bold' | 'regular'} weight: The weight of the icon font. Defaults to "bold".
  * @prop {function} onClick: Optional click handler for the icon.
+ * @prop {CSSProperties} style: Optional additional styles to apply to the container div.
  * @return {ReactElement} The rendered icon component.
  */
 declare const DisplayIcon: FunctionComponent<DisplayIconProps>;

package/dist/utils/comps/DisplayIcon/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -16,11 +27,12 @@ var themes_1 = require("../../../v2/themes");
  * @prop {string} color: The color of the icon.
  * @prop {'bold' | 'regular'} weight: The weight of the icon font. Defaults to "bold".
  * @prop {function} onClick: Optional click handler for the icon.
+ * @prop {CSSProperties} style: Optional additional styles to apply to the container div.
  * @return {ReactElement} The rendered icon component.
  */
 var DisplayIcon = function (_a) {
-    var icon = _a.icon, size = _a.size, _b = _a.color, color = _b === void 0 ? themes_1.colors.grey80 : _b, _c = _a.weight, weight = _c === void 0 ? "bold" : _c, onClick = _a.onClick;
+    var icon = _a.icon, size = _a.size, _b = _a.color, color = _b === void 0 ? themes_1.colors.grey80 : _b, _c = _a.weight, weight = _c === void 0 ? "bold" : _c, onClick = _a.onClick, _d = _a.style, style = _d === void 0 ? {} : _d;
     var IconComp = icons_1.icons[icon];
-    return (react_1.default.createElement("div", { style: { cursor: onClick ? "pointer" : "default", display: "flex" }, onMouseDown: onClick || undefined }, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight })));
+    return (react_1.default.createElement("div", { style: __assign({ cursor: onClick ? "pointer" : "default", display: "flex" }, style), onMouseDown: onClick || undefined }, IconComp && react_1.default.createElement(IconComp, { size: size, color: color, weight: weight })));
 };
 exports.DisplayIcon = DisplayIcon;

package/dist/utils/useStyleUpdateAfterToggleTransition.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyleUpdateAfterToggleTransition: ({ styleOptions, initStyle: _initStyle, toggleState, transitionDuration }: {
+    styleOptions: any;
+    initStyle: any;
+    toggleState: any;
+    transitionDuration: any;
+}) => {
+    style: any;
+};

package/dist/utils/useStyleUpdateAfterToggleTransition.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyleUpdateAfterToggleTransition = void 0;
+var react_1 = require("react");
+var useStyleUpdateAfterToggleTransition = function (_a) {
+    var styleOptions = _a.styleOptions, // ['hidden', 'visible']
+    _initStyle = _a.initStyle, //hidden
+    toggleState = _a.toggleState, //isExpanded
+    transitionDuration = _a.transitionDuration //300
+    ;
+    var initStyle = (0, react_1.useRef)(_initStyle);
+    //helps to make the accordionOverflow visible once its open,
+    //for scenarios where a data viz tooltip needs to stick out
+    var _b = (0, react_1.useState)(initStyle.current), style = _b[0], setStyle = _b[1];
+    (0, react_1.useEffect)(function () {
+        var timeoutId;
+        if (toggleState) {
+            // Set timeout for making content visible after animation
+            timeoutId = setTimeout(function () {
+                // Double check if still expanded before setting to visible
+                if (toggleState) {
+                    setStyle(styleOptions.find(function (op) { return op !== initStyle.current; }));
+                }
+            }, transitionDuration);
+        }
+        else {
+            // Immediately set to hidden when closing
+            setStyle(initStyle.current);
+        }
+        // Cleanup function to clear timeout if component updates/unmounts
+        return function () {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [toggleState, transitionDuration]);
+    return ({
+        style: style
+    });
+};
+exports.useStyleUpdateAfterToggleTransition = useStyleUpdateAfterToggleTransition;

package/dist/v2/components/Accordion/index.js

@@ -48,6 +48,7 @@ var ActionMenu_1 = require("../../../components/ActionMenu");
 var phosphor_react_1 = require("phosphor-react");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
+var useStyleUpdateAfterToggleTransition_1 = require("../../../utils/useStyleUpdateAfterToggleTransition");
 var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"], ["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"])), colors_1.colors.grey10);
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
@@ -104,31 +105,12 @@ var Accordion = function (_a) {
     var _d = (0, react_1.useState)(defaultExpanded), isExpanded = _d[0], setIsExpanded = _d[1];
     var _e = useCalculateWrapperHeight({ isExpanded: isExpanded }), wrapperRef = _e.wrapperRef, wrapperHeight = _e.wrapperHeight;
     var expandAnimationDuration = 300;
-    //helps to make the accordionOverflow visible once its open,
-    //for scenarios where a data viz tooltip needs to stick out
-    var _f = (0, react_1.useState)("hidden"), accordionOverflow = _f[0], setAccordionOverflow = _f[1];
-    (0, react_1.useEffect)(function () {
-        var timeoutId;
-        if (isExpanded) {
-            // Set timeout for making content visible after animation
-            timeoutId = setTimeout(function () {
-                // Double check if still expanded before setting to visible
-                if (isExpanded) {
-                    setAccordionOverflow("visible");
-                }
-            }, expandAnimationDuration);
-        }
-        else {
-            // Immediately set to hidden when closing
-            setAccordionOverflow("hidden");
-        }
-        // Cleanup function to clear timeout if component updates/unmounts
-        return function () {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [isExpanded, expandAnimationDuration]);
+    var accordionOverflow = (0, useStyleUpdateAfterToggleTransition_1.useStyleUpdateAfterToggleTransition)({
+        styleOptions: ['hidden', 'visible'],
+        initStyle: 'hidden',
+        toggleState: isExpanded,
+        transitionDuration: expandAnimationDuration
+    }).style;
     return (react_1.default.createElement(StyledContainer, null,
         react_1.default.createElement(StyledHeader, { onClick: function () { return setIsExpanded(!isExpanded); } },
             react_1.default.createElement("div", { style: { flex: "1 0 0" } },

package/dist/v2/components/BlockLabel/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -47,7 +58,8 @@ var Typo2_1 = require("../Typo2");
 var colors_1 = require("../../themes/colors");
 var grey40 = colors_1.colors.grey40, grey60 = colors_1.colors.grey60;
 var BlockLabel = function (props) {
-    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, disabled = props.disabled, S = props.S;
+    var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, _a = props.style, style = _a === void 0 ? {} : _a, marginBottom = props.marginBottom, // some comps like radiolist and checkboxlist need a bit more marginbottom, so they control it themselves
+    errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, hintsTitle = props.hintsTitle, hintsBtnLabel = props.hintsBtnLabel, hintsSubtitle = props.hintsSubtitle, hideOptionalLabel = props.hideOptionalLabel, infoTooltip = props.infoTooltip, disabled = props.disabled, S = props.S;
     var shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||
@@ -61,15 +73,15 @@ var BlockLabel = function (props) {
     var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 //this first condition seems like a proper hack..
         ? "danger"
         : errorMsgs[0].type || "danger";
-    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className, id: "tempBlocklabelOverride", sublabel: sublabel, S: S },
+    return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: __assign(__assign({}, style), { marginBottom: (marginBottom || (sublabel ? '0.6rem' : '0.4rem')) }), className: className, id: "tempBlocklabelOverride", sublabel: sublabel, S: S },
         react_1.default.createElement("div", { style: { display: "flex", gap: "0.4rem" } },
-            (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80, semibold: true }, label || inputOnlyLabel)),
+            (label || inputOnlyLabel) && (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { color: disabled ? colors_1.colors.grey40 : colors_1.colors.grey80, semibold: true }, label || inputOnlyLabel)),
             !readOnly && (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null,
-            optional && !hideOptionalLabel && (react_1.default.createElement(Typo2_1.UI_BODY_SM, { color: disabled ? colors_1.colors.grey20 : colors_1.colors.grey40 }, "(optional)")),
+            optional && !hideOptionalLabel && (react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, { color: disabled ? colors_1.colors.grey20 : colors_1.colors.grey40 }, "(optional)")),
             !readOnly && hints ? (react_1.default.createElement(Hints_1.default, { id: id, title: hintsTitle, btnlabel: hintsBtnLabel, subtitle: hintsSubtitle, hints: hints, disabled: disabled })) : null,
             infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || "right", invert: invert, debug: infoTooltip.debug, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: "infoIcon" }))),
         !readOnly &&
             sublabel &&
-            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo2_1.UI_CAPTION, { key: i, color: disabled ? colors_1.colors.grey40 : grey60 }, subL)); }))));
+            (0, toArray_1.toArray)(sublabel).map(function (subL, i) { return (react_1.default.createElement(Typo2_1.UI_CAPTION_DF, { key: i, color: disabled ? colors_1.colors.grey40 : grey60 }, subL)); }))));
 };
 exports.BlockLabel = BlockLabel;

package/dist/v2/components/BlockLabel/index.styled.js

@@ -9,11 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledInfoTooltipbutton = exports.StyledBlockLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  margin-bottom: ", ";\n\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  margin-bottom: ", ";\n\n  position: relative;\n"])), function (_a) {
-    var sublabel = _a.sublabel, S = _a.S;
-    return S
-        ? (sublabel ? '0.4rem' : '0.2rem')
-        : (sublabel ? '0.6rem' : '0.4rem');
-});
+exports.StyledBlockLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 0.2rem;\n  position: relative;\n"])));
 exports.StyledInfoTooltipbutton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  outline: none;\n"], ["\n  border: none;\n  background: none;\n  outline: none;\n"])));
 var templateObject_1, templateObject_2;