oolib 2.195.1 → 2.196.0

package/dist/components/Accordion/index.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
 var framer_motion_1 = require("framer-motion");
-var phosphor_react_1 = require("phosphor-react");
 var react_1 = __importStar(require("react"));
 var Buttons_1 = require("../Buttons");
 var Typo_1 = require("../Typo");
@@ -44,6 +43,8 @@ var utilsOolib_1 = require("../../utilsOolib");
 var PercentCompletedPie_1 = require("../PercentCompletedPie");
 var Tooltip_1 = require("../Tooltip");
 var styled_1 = require("./styled");
+var icons_1 = require("../../icons");
+var CaretDown = icons_1.icons.CaretDown;
 var HeaderStyle1 = function (_a) {
     var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle, infoTooltip = _a.infoTooltip, invert = _a.invert;
     return (react_1.default.createElement(styled_1.StyledHeaderStyle1Wrapper, { onClick: function () { return handleToggle(!expand); } },
@@ -52,7 +53,7 @@ var HeaderStyle1 = function (_a) {
             infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: typeof infoTooltip === 'string' ? infoTooltip : infoTooltip.text, position: typeof infoTooltip !== 'string' ? infoTooltip.position || 'right' : 'right', invert: invert, popOutOfOverflowHiddenParent: typeof infoTooltip !== 'string' && infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))),
         react_1.default.createElement(styled_1.NormalizedButton, null,
             react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
-                react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
+                react_1.default.createElement(CaretDown, { size: 16 })))));
 };
 var HeaderStyle3 = function (_a) {
     var title = _a.title, expand = _a.expand, handleToggle = _a.handleToggle, infoTooltip = _a.infoTooltip, invert = _a.invert;
@@ -62,7 +63,7 @@ var HeaderStyle3 = function (_a) {
             infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: typeof infoTooltip === 'string' ? infoTooltip : infoTooltip.text, position: typeof infoTooltip !== 'string' ? infoTooltip.position || 'right' : 'right', invert: invert, popOutOfOverflowHiddenParent: typeof infoTooltip !== 'string' && infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))),
         react_1.default.createElement(styled_1.NormalizedButton, null,
             react_1.default.createElement(framer_motion_1.motion.div, { animate: { rotate: expand ? -180 : 0 }, transition: { type: 'tween', ease: 'easeOut' } },
-                react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })))));
+                react_1.default.createElement(CaretDown, { size: 16 })))));
 };
 var HeaderStyle2 = function (_a) {
     var title = _a.title, label = _a.label, expand = _a.expand, handleToggle = _a.handleToggle, percent = _a.percent, infoTooltip = _a.infoTooltip, invert = _a.invert;

package/dist/components/BlockLabel/index.js

@@ -45,7 +45,6 @@ var colors_1 = require("../../themes/colors");
 var toArray_1 = require("../../utils/toArray");
 var Hints_1 = __importDefault(require("../Hints"));
 var Tooltip_1 = require("../Tooltip");
-var phosphor_react_1 = require("phosphor-react");
 var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
 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;

package/dist/components/Tooltip/index.js

@@ -45,12 +45,13 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-var phosphor_react_1 = require("phosphor-react");
 var react_1 = __importStar(require("react"));
 var themes_1 = require("../../themes");
 var usePopOutOfOverflowHiddenParent_1 = require("../../utils/usePopOutOfOverflowHiddenParent");
 var Typo_1 = require("../Typo");
 var styled_1 = require("./styled");
+var icons_1 = require("../../icons");
+var Info = icons_1.icons.Info;
 /**
  * @component Renders a tooltip component with customizable text and styling.
  *
@@ -99,7 +100,7 @@ var Tooltip = function (_a) {
                 setIsClicked(false), setShowTooltip(false);
             }, ref: targetRef, tabIndex: 0 }, presetTarget === "infoIcon" ? (react_1.default.createElement(styled_1.StyledIconButton, null,
             " ",
-            react_1.default.createElement(phosphor_react_1.Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 16, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
+            react_1.default.createElement(Info, { color: invert ? themes_1.colors.white : themes_1.colors.greyColor100, size: 16, weight: showTooltip ? 'fill' : 'regular' }))) : (children)),
         showTooltip && (react_1.default.createElement(styled_1.StyledTooltipBox, { fixPos: fixPos, isOpen: showTooltip, position: position, show: showTooltip, style: style, invert: invert },
             text.split('\n').filter(Boolean).map(function (singleline, i) { return (react_1.default.createElement(Typo_1.SANS_2, __assign({}, (i !== 0 ? { style: { marginTop: '0.5rem' } } : {})), singleline)); }),
             react_1.default.createElement(styled_1.StyledArrowOutline, { position: position },

package/dist/icons/index.d.ts

@@ -128,6 +128,9 @@ export namespace icons {
     export { CaretDoubleLeft };
     export { TextIndent };
     export { Share };
+    export { ChartBarHorizontal };
+    export { GridNine };
+    export { ChartDonut };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -192,135 +195,138 @@ export namespace icons {
     export { Reactions };
     export { WarningDiamond };
 }
-import { PencilSimple } from 'phosphor-react';
-import { PencilLine } from 'phosphor-react';
-import { Plus } from 'phosphor-react';
-import { Lightbulb } from 'phosphor-react';
-import { Tag } from 'phosphor-react';
-import { UploadSimple } from 'phosphor-react';
-import { CaretLeft } from 'phosphor-react';
-import { CaretRight } from 'phosphor-react';
-import { XCircle } from 'phosphor-react';
-import { XSquare } from 'phosphor-react';
-import { DownloadSimple } from 'phosphor-react';
-import { ArrowLineUpRight } from 'phosphor-react';
-import { User } from 'phosphor-react';
-import { UserCirclePlus } from 'phosphor-react';
-import { MapPinLine } from 'phosphor-react';
-import { WarningCircle } from 'phosphor-react';
-import { HighlighterCircle } from 'phosphor-react';
-import { Paperclip } from 'phosphor-react';
-import { SpeakerHigh } from 'phosphor-react';
-import { ArrowLeft } from 'phosphor-react';
-import { CalendarBlank } from 'phosphor-react';
-import { Trash } from 'phosphor-react';
-import { DotsThreeVertical } from 'phosphor-react';
-import { DotsThreeCircle } from 'phosphor-react';
-import { DotsThree } from 'phosphor-react';
-import { CaretUp } from 'phosphor-react';
-import { CaretDown } from 'phosphor-react';
-import { ShareNetwork } from 'phosphor-react';
-import { X } from 'phosphor-react';
-import { WhatsappLogo } from 'phosphor-react';
-import { FacebookLogo } from 'phosphor-react';
-import { TwitterLogo } from 'phosphor-react';
-import { LinkedinLogo } from 'phosphor-react';
-import { YoutubeLogo } from 'phosphor-react';
-import { InstagramLogo } from 'phosphor-react';
-import { Globe } from 'phosphor-react';
-import { Phone } from 'phosphor-react';
-import { Envelope } from 'phosphor-react';
-import { Checks } from 'phosphor-react';
-import { Check } from 'phosphor-react';
-import { ArrowClockwise } from 'phosphor-react';
-import { ArrowsClockwise } from 'phosphor-react';
-import { ArrowsIn } from 'phosphor-react';
-import { ArrowsOut } from 'phosphor-react';
-import { MapPin } from 'phosphor-react';
-import { ArrowDown } from 'phosphor-react';
-import { ArrowsDownUp } from 'phosphor-react';
-import { ArrowUp } from 'phosphor-react';
-import { GearSix } from 'phosphor-react';
-import { Wrench } from 'phosphor-react';
-import { CheckSquare } from 'phosphor-react';
-import { CheckSquareOffset } from 'phosphor-react';
-import { Cards } from 'phosphor-react';
-import { SignOut } from 'phosphor-react';
-import { Swap } from 'phosphor-react';
-import { CheckCircle } from 'phosphor-react';
-import { Circle } from 'phosphor-react';
-import { ImageSquare } from 'phosphor-react';
-import { ListDashes } from 'phosphor-react';
-import { ListNumbers } from 'phosphor-react';
-import { ListPlus } from 'phosphor-react';
-import { List } from 'phosphor-react';
-import { FileArrowUp } from 'phosphor-react';
-import { VideoCamera } from 'phosphor-react';
-import { Quotes } from 'phosphor-react';
-import { SpeakerSimpleHigh } from 'phosphor-react';
-import { FilePdf } from 'phosphor-react';
-import { MagnifyingGlass } from 'phosphor-react';
-import { Eye } from 'phosphor-react';
-import { EyeClosed } from 'phosphor-react';
-import { Minus } from 'phosphor-react';
-import { TextHOne } from 'phosphor-react';
-import { TextHTwo } from 'phosphor-react';
-import { TextHThree } from 'phosphor-react';
-import { TextBolder } from 'phosphor-react';
-import { TextItalic } from 'phosphor-react';
-import { TextUnderline } from 'phosphor-react';
-import { ArrowRight } from 'phosphor-react';
-import { Sliders } from 'phosphor-react';
-import { Faders } from 'phosphor-react';
-import { Code } from 'phosphor-react';
-import { SortDescending } from 'phosphor-react';
-import { SortAscending } from 'phosphor-react';
-import { Crosshair } from 'phosphor-react';
-import { MicrophoneStage } from 'phosphor-react';
-import { File } from 'phosphor-react';
-import { FolderSimple } from 'phosphor-react';
-import { FolderSimpleStar } from 'phosphor-react';
-import { LinkSimple } from 'phosphor-react';
-import { Laptop } from 'phosphor-react';
-import { Info } from 'phosphor-react';
-import { DotsSixVertical } from 'phosphor-react';
-import { Bell } from 'phosphor-react';
-import { UserSwitch } from 'phosphor-react';
-import { PlusMinus } from 'phosphor-react';
-import { SelectionAll } from 'phosphor-react';
-import { Activity } from 'phosphor-react';
-import { Browsers } from 'phosphor-react';
-import { Cube } from 'phosphor-react';
-import { Table } from 'phosphor-react';
-import { UserList } from 'phosphor-react';
-import { Binoculars } from 'phosphor-react';
-import { LightbulbFilament } from 'phosphor-react';
-import { Keyboard } from 'phosphor-react';
-import { TextAa } from 'phosphor-react';
-import { ThumbsUp } from 'phosphor-react';
-import { ChatText } from 'phosphor-react';
-import { SlackLogo } from 'phosphor-react';
-import { SquareHalf } from 'phosphor-react';
-import { SquareHalfBottom } from 'phosphor-react';
-import { MagicWand } from 'phosphor-react';
-import { CrownSimple } from 'phosphor-react';
-import { Funnel } from 'phosphor-react';
-import { ThumbsDown } from 'phosphor-react';
-import { CopySimple } from 'phosphor-react';
-import { PaperPlaneRight } from 'phosphor-react';
-import { Warning } from 'phosphor-react';
-import { Star } from 'phosphor-react';
-import { ArrowsVertical } from 'phosphor-react';
-import { CirclesFour } from 'phosphor-react';
-import { ArrowLineDown } from 'phosphor-react';
-import { PaperPlaneTilt } from 'phosphor-react';
-import { NotePencil } from 'phosphor-react';
-import { CircleNotch } from 'phosphor-react';
-import { PaintBucket } from 'phosphor-react';
-import { SquaresFour } from 'phosphor-react';
-import { CaretDoubleLeft } from 'phosphor-react';
-import { TextIndent } from 'phosphor-react';
-import { Share } from 'phosphor-react';
+import { PencilSimpleIcon as PencilSimple } from '@phosphor-icons/react';
+import { PencilLineIcon as PencilLine } from '@phosphor-icons/react';
+import { PlusIcon as Plus } from '@phosphor-icons/react';
+import { LightbulbIcon as Lightbulb } from '@phosphor-icons/react';
+import { TagIcon as Tag } from '@phosphor-icons/react';
+import { UploadSimpleIcon as UploadSimple } from '@phosphor-icons/react';
+import { CaretLeftIcon as CaretLeft } from '@phosphor-icons/react';
+import { CaretRightIcon as CaretRight } from '@phosphor-icons/react';
+import { XCircleIcon as XCircle } from '@phosphor-icons/react';
+import { XSquareIcon as XSquare } from '@phosphor-icons/react';
+import { DownloadSimpleIcon as DownloadSimple } from '@phosphor-icons/react';
+import { ArrowLineUpRightIcon as ArrowLineUpRight } from '@phosphor-icons/react';
+import { UserIcon as User } from '@phosphor-icons/react';
+import { UserCirclePlusIcon as UserCirclePlus } from '@phosphor-icons/react';
+import { MapPinLineIcon as MapPinLine } from '@phosphor-icons/react';
+import { WarningCircleIcon as WarningCircle } from '@phosphor-icons/react';
+import { HighlighterCircleIcon as HighlighterCircle } from '@phosphor-icons/react';
+import { PaperclipIcon as Paperclip } from '@phosphor-icons/react';
+import { SpeakerHighIcon as SpeakerHigh } from '@phosphor-icons/react';
+import { ArrowLeftIcon as ArrowLeft } from '@phosphor-icons/react';
+import { CalendarBlankIcon as CalendarBlank } from '@phosphor-icons/react';
+import { TrashIcon as Trash } from '@phosphor-icons/react';
+import { DotsThreeVerticalIcon as DotsThreeVertical } from '@phosphor-icons/react';
+import { DotsThreeCircleIcon as DotsThreeCircle } from '@phosphor-icons/react';
+import { DotsThreeIcon as DotsThree } from '@phosphor-icons/react';
+import { CaretUpIcon as CaretUp } from '@phosphor-icons/react';
+import { CaretDownIcon as CaretDown } from '@phosphor-icons/react';
+import { ShareNetworkIcon as ShareNetwork } from '@phosphor-icons/react';
+import { XIcon as X } from '@phosphor-icons/react';
+import { WhatsappLogoIcon as WhatsappLogo } from '@phosphor-icons/react';
+import { FacebookLogoIcon as FacebookLogo } from '@phosphor-icons/react';
+import { TwitterLogoIcon as TwitterLogo } from '@phosphor-icons/react';
+import { LinkedinLogoIcon as LinkedinLogo } from '@phosphor-icons/react';
+import { YoutubeLogoIcon as YoutubeLogo } from '@phosphor-icons/react';
+import { InstagramLogoIcon as InstagramLogo } from '@phosphor-icons/react';
+import { GlobeIcon as Globe } from '@phosphor-icons/react';
+import { PhoneIcon as Phone } from '@phosphor-icons/react';
+import { EnvelopeIcon as Envelope } from '@phosphor-icons/react';
+import { ChecksIcon as Checks } from '@phosphor-icons/react';
+import { CheckIcon as Check } from '@phosphor-icons/react';
+import { ArrowClockwiseIcon as ArrowClockwise } from '@phosphor-icons/react';
+import { ArrowsClockwiseIcon as ArrowsClockwise } from '@phosphor-icons/react';
+import { ArrowsInIcon as ArrowsIn } from '@phosphor-icons/react';
+import { ArrowsOutIcon as ArrowsOut } from '@phosphor-icons/react';
+import { MapPinIcon as MapPin } from '@phosphor-icons/react';
+import { ArrowDownIcon as ArrowDown } from '@phosphor-icons/react';
+import { ArrowsDownUpIcon as ArrowsDownUp } from '@phosphor-icons/react';
+import { ArrowUpIcon as ArrowUp } from '@phosphor-icons/react';
+import { GearSixIcon as GearSix } from '@phosphor-icons/react';
+import { WrenchIcon as Wrench } from '@phosphor-icons/react';
+import { CheckSquareIcon as CheckSquare } from '@phosphor-icons/react';
+import { CheckSquareOffsetIcon as CheckSquareOffset } from '@phosphor-icons/react';
+import { CardsIcon as Cards } from '@phosphor-icons/react';
+import { SignOutIcon as SignOut } from '@phosphor-icons/react';
+import { SwapIcon as Swap } from '@phosphor-icons/react';
+import { CheckCircleIcon as CheckCircle } from '@phosphor-icons/react';
+import { CircleIcon as Circle } from '@phosphor-icons/react';
+import { ImageSquareIcon as ImageSquare } from '@phosphor-icons/react';
+import { ListDashesIcon as ListDashes } from '@phosphor-icons/react';
+import { ListNumbersIcon as ListNumbers } from '@phosphor-icons/react';
+import { ListPlusIcon as ListPlus } from '@phosphor-icons/react';
+import { ListIcon as List } from '@phosphor-icons/react';
+import { FileArrowUpIcon as FileArrowUp } from '@phosphor-icons/react';
+import { VideoCameraIcon as VideoCamera } from '@phosphor-icons/react';
+import { QuotesIcon as Quotes } from '@phosphor-icons/react';
+import { SpeakerSimpleHighIcon as SpeakerSimpleHigh } from '@phosphor-icons/react';
+import { FilePdfIcon as FilePdf } from '@phosphor-icons/react';
+import { MagnifyingGlassIcon as MagnifyingGlass } from '@phosphor-icons/react';
+import { EyeIcon as Eye } from '@phosphor-icons/react';
+import { EyeClosedIcon as EyeClosed } from '@phosphor-icons/react';
+import { MinusIcon as Minus } from '@phosphor-icons/react';
+import { TextHOneIcon as TextHOne } from '@phosphor-icons/react';
+import { TextHTwoIcon as TextHTwo } from '@phosphor-icons/react';
+import { TextHThreeIcon as TextHThree } from '@phosphor-icons/react';
+import { TextBolderIcon as TextBolder } from '@phosphor-icons/react';
+import { TextItalicIcon as TextItalic } from '@phosphor-icons/react';
+import { TextUnderlineIcon as TextUnderline } from '@phosphor-icons/react';
+import { ArrowRightIcon as ArrowRight } from '@phosphor-icons/react';
+import { SlidersIcon as Sliders } from '@phosphor-icons/react';
+import { FadersIcon as Faders } from '@phosphor-icons/react';
+import { CodeIcon as Code } from '@phosphor-icons/react';
+import { SortDescendingIcon as SortDescending } from '@phosphor-icons/react';
+import { SortAscendingIcon as SortAscending } from '@phosphor-icons/react';
+import { CrosshairIcon as Crosshair } from '@phosphor-icons/react';
+import { MicrophoneStageIcon as MicrophoneStage } from '@phosphor-icons/react';
+import { FileIcon as File } from '@phosphor-icons/react';
+import { FolderSimpleIcon as FolderSimple } from '@phosphor-icons/react';
+import { FolderSimpleStarIcon as FolderSimpleStar } from '@phosphor-icons/react';
+import { LinkSimpleIcon as LinkSimple } from '@phosphor-icons/react';
+import { LaptopIcon as Laptop } from '@phosphor-icons/react';
+import { InfoIcon as Info } from '@phosphor-icons/react';
+import { DotsSixVerticalIcon as DotsSixVertical } from '@phosphor-icons/react';
+import { BellIcon as Bell } from '@phosphor-icons/react';
+import { UserSwitchIcon as UserSwitch } from '@phosphor-icons/react';
+import { PlusMinusIcon as PlusMinus } from '@phosphor-icons/react';
+import { SelectionAllIcon as SelectionAll } from '@phosphor-icons/react';
+import { ActivityIcon as Activity } from '@phosphor-icons/react';
+import { BrowsersIcon as Browsers } from '@phosphor-icons/react';
+import { CubeIcon as Cube } from '@phosphor-icons/react';
+import { TableIcon as Table } from '@phosphor-icons/react';
+import { UserListIcon as UserList } from '@phosphor-icons/react';
+import { BinocularsIcon as Binoculars } from '@phosphor-icons/react';
+import { LightbulbFilamentIcon as LightbulbFilament } from '@phosphor-icons/react';
+import { KeyboardIcon as Keyboard } from '@phosphor-icons/react';
+import { TextAaIcon as TextAa } from '@phosphor-icons/react';
+import { ThumbsUpIcon as ThumbsUp } from '@phosphor-icons/react';
+import { ChatTextIcon as ChatText } from '@phosphor-icons/react';
+import { SlackLogoIcon as SlackLogo } from '@phosphor-icons/react';
+import { SquareHalfIcon as SquareHalf } from '@phosphor-icons/react';
+import { SquareHalfBottomIcon as SquareHalfBottom } from '@phosphor-icons/react';
+import { MagicWandIcon as MagicWand } from '@phosphor-icons/react';
+import { CrownSimpleIcon as CrownSimple } from '@phosphor-icons/react';
+import { FunnelIcon as Funnel } from '@phosphor-icons/react';
+import { ThumbsDownIcon as ThumbsDown } from '@phosphor-icons/react';
+import { CopySimpleIcon as CopySimple } from '@phosphor-icons/react';
+import { PaperPlaneRightIcon as PaperPlaneRight } from '@phosphor-icons/react';
+import { WarningIcon as Warning } from '@phosphor-icons/react';
+import { StarIcon as Star } from '@phosphor-icons/react';
+import { ArrowsVerticalIcon as ArrowsVertical } from '@phosphor-icons/react';
+import { CirclesFourIcon as CirclesFour } from '@phosphor-icons/react';
+import { ArrowLineDownIcon as ArrowLineDown } from '@phosphor-icons/react';
+import { PaperPlaneTiltIcon as PaperPlaneTilt } from '@phosphor-icons/react';
+import { NotePencilIcon as NotePencil } from '@phosphor-icons/react';
+import { CircleNotchIcon as CircleNotch } from '@phosphor-icons/react';
+import { PaintBucketIcon as PaintBucket } from '@phosphor-icons/react';
+import { SquaresFourIcon as SquaresFour } from '@phosphor-icons/react';
+import { CaretDoubleLeftIcon as CaretDoubleLeft } from '@phosphor-icons/react';
+import { TextIndentIcon as TextIndent } from '@phosphor-icons/react';
+import { ShareIcon as Share } from '@phosphor-icons/react';
+import { ChartBarHorizontalIcon as ChartBarHorizontal } from '@phosphor-icons/react';
+import { GridNineIcon as GridNine } from '@phosphor-icons/react';
+import { ChartDonutIcon as ChartDonut } from '@phosphor-icons/react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -1,138 +1,141 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.icons = void 0;
-var phosphor_react_1 = require("phosphor-react");
+var react_1 = require("@phosphor-icons/react");
 var custom_1 = require("./custom");
 exports.icons = {
-    PencilSimple: phosphor_react_1.PencilSimple,
-    PencilLine: phosphor_react_1.PencilLine,
-    Plus: phosphor_react_1.Plus,
-    Lightbulb: phosphor_react_1.Lightbulb,
-    Tag: phosphor_react_1.Tag,
-    UploadSimple: phosphor_react_1.UploadSimple,
-    CaretLeft: phosphor_react_1.CaretLeft,
-    CaretRight: phosphor_react_1.CaretRight,
-    XCircle: phosphor_react_1.XCircle,
-    XSquare: phosphor_react_1.XSquare,
-    DownloadSimple: phosphor_react_1.DownloadSimple,
-    ArrowLineUpRight: phosphor_react_1.ArrowLineUpRight,
-    User: phosphor_react_1.User,
-    UserCirclePlus: phosphor_react_1.UserCirclePlus,
-    MapPinLine: phosphor_react_1.MapPinLine,
-    WarningCircle: phosphor_react_1.WarningCircle,
-    HighlighterCircle: phosphor_react_1.HighlighterCircle,
-    Paperclip: phosphor_react_1.Paperclip,
-    SpeakerHigh: phosphor_react_1.SpeakerHigh,
-    ArrowLeft: phosphor_react_1.ArrowLeft,
-    CalendarBlank: phosphor_react_1.CalendarBlank,
-    Trash: phosphor_react_1.Trash,
-    DotsThreeVertical: phosphor_react_1.DotsThreeVertical,
-    DotsThreeCircle: phosphor_react_1.DotsThreeCircle,
-    DotsThree: phosphor_react_1.DotsThree,
-    CaretUp: phosphor_react_1.CaretUp,
-    CaretDown: phosphor_react_1.CaretDown,
-    ShareNetwork: phosphor_react_1.ShareNetwork,
-    X: phosphor_react_1.X,
-    WhatsappLogo: phosphor_react_1.WhatsappLogo,
-    FacebookLogo: phosphor_react_1.FacebookLogo,
-    TwitterLogo: phosphor_react_1.TwitterLogo,
-    LinkedinLogo: phosphor_react_1.LinkedinLogo,
-    YoutubeLogo: phosphor_react_1.YoutubeLogo,
-    InstagramLogo: phosphor_react_1.InstagramLogo,
-    Globe: phosphor_react_1.Globe,
-    Phone: phosphor_react_1.Phone,
-    Envelope: phosphor_react_1.Envelope,
-    Checks: phosphor_react_1.Checks,
-    Check: phosphor_react_1.Check,
-    ArrowClockwise: phosphor_react_1.ArrowClockwise,
-    ArrowsClockwise: phosphor_react_1.ArrowsClockwise,
-    ArrowsIn: phosphor_react_1.ArrowsIn,
-    ArrowsOut: phosphor_react_1.ArrowsOut,
-    MapPin: phosphor_react_1.MapPin,
-    ArrowDown: phosphor_react_1.ArrowDown,
-    ArrowsDownUp: phosphor_react_1.ArrowsDownUp,
-    ArrowUp: phosphor_react_1.ArrowUp,
-    GearSix: phosphor_react_1.GearSix,
-    Wrench: phosphor_react_1.Wrench,
-    CheckSquare: phosphor_react_1.CheckSquare,
-    CheckSquareOffset: phosphor_react_1.CheckSquareOffset,
-    Cards: phosphor_react_1.Cards,
-    SignOut: phosphor_react_1.SignOut,
-    Swap: phosphor_react_1.Swap,
-    CheckCircle: phosphor_react_1.CheckCircle,
-    Circle: phosphor_react_1.Circle,
-    ImageSquare: phosphor_react_1.ImageSquare,
-    ListDashes: phosphor_react_1.ListDashes,
-    ListNumbers: phosphor_react_1.ListNumbers,
-    ListPlus: phosphor_react_1.ListPlus,
-    List: phosphor_react_1.List,
-    FileArrowUp: phosphor_react_1.FileArrowUp,
-    VideoCamera: phosphor_react_1.VideoCamera,
-    Quotes: phosphor_react_1.Quotes,
-    SpeakerSimpleHigh: phosphor_react_1.SpeakerSimpleHigh,
-    FilePdf: phosphor_react_1.FilePdf,
-    MagnifyingGlass: phosphor_react_1.MagnifyingGlass,
-    Eye: phosphor_react_1.Eye,
-    EyeClosed: phosphor_react_1.EyeClosed,
-    Minus: phosphor_react_1.Minus,
-    TextHOne: phosphor_react_1.TextHOne,
-    TextHTwo: phosphor_react_1.TextHTwo,
-    TextHThree: phosphor_react_1.TextHThree,
-    TextBolder: phosphor_react_1.TextBolder,
-    TextItalic: phosphor_react_1.TextItalic,
-    TextUnderline: phosphor_react_1.TextUnderline,
-    ArrowRight: phosphor_react_1.ArrowRight,
-    Sliders: phosphor_react_1.Sliders,
-    Faders: phosphor_react_1.Faders,
-    Code: phosphor_react_1.Code,
-    SortDescending: phosphor_react_1.SortDescending,
-    SortAscending: phosphor_react_1.SortAscending,
-    Crosshair: phosphor_react_1.Crosshair,
-    MicrophoneStage: phosphor_react_1.MicrophoneStage,
-    File: phosphor_react_1.File,
-    FolderSimple: phosphor_react_1.FolderSimple,
-    FolderSimpleStar: phosphor_react_1.FolderSimpleStar,
-    LinkSimple: phosphor_react_1.LinkSimple,
-    Laptop: phosphor_react_1.Laptop,
-    Info: phosphor_react_1.Info,
-    DotsSixVertical: phosphor_react_1.DotsSixVertical,
-    Bell: phosphor_react_1.Bell,
-    UserSwitch: phosphor_react_1.UserSwitch,
-    PlusMinus: phosphor_react_1.PlusMinus,
-    SelectionAll: phosphor_react_1.SelectionAll,
-    Activity: phosphor_react_1.Activity,
-    Browsers: phosphor_react_1.Browsers,
-    Cube: phosphor_react_1.Cube,
-    Table: phosphor_react_1.Table,
-    UserList: phosphor_react_1.UserList,
-    Binoculars: phosphor_react_1.Binoculars,
-    LightbulbFilament: phosphor_react_1.LightbulbFilament,
-    Keyboard: phosphor_react_1.Keyboard,
-    TextAa: phosphor_react_1.TextAa,
-    ThumbsUp: phosphor_react_1.ThumbsUp,
-    ChatText: phosphor_react_1.ChatText,
-    SlackLogo: phosphor_react_1.SlackLogo,
-    SquareHalf: phosphor_react_1.SquareHalf,
-    SquareHalfBottom: phosphor_react_1.SquareHalfBottom,
-    MagicWand: phosphor_react_1.MagicWand,
-    CrownSimple: phosphor_react_1.CrownSimple,
-    Funnel: phosphor_react_1.Funnel,
-    ThumbsDown: phosphor_react_1.ThumbsDown,
-    CopySimple: phosphor_react_1.CopySimple,
-    PaperPlaneRight: phosphor_react_1.PaperPlaneRight,
-    Warning: phosphor_react_1.Warning,
-    Star: phosphor_react_1.Star,
-    ArrowsVertical: phosphor_react_1.ArrowsVertical,
-    CirclesFour: phosphor_react_1.CirclesFour,
-    ArrowLineDown: phosphor_react_1.ArrowLineDown,
-    PaperPlaneTilt: phosphor_react_1.PaperPlaneTilt,
-    NotePencil: phosphor_react_1.NotePencil,
-    CircleNotch: phosphor_react_1.CircleNotch,
-    PaintBucket: phosphor_react_1.PaintBucket,
-    SquaresFour: phosphor_react_1.SquaresFour,
-    CaretDoubleLeft: phosphor_react_1.CaretDoubleLeft,
-    TextIndent: phosphor_react_1.TextIndent,
-    Share: phosphor_react_1.Share,
+    PencilSimple: react_1.PencilSimpleIcon,
+    PencilLine: react_1.PencilLineIcon,
+    Plus: react_1.PlusIcon,
+    Lightbulb: react_1.LightbulbIcon,
+    Tag: react_1.TagIcon,
+    UploadSimple: react_1.UploadSimpleIcon,
+    CaretLeft: react_1.CaretLeftIcon,
+    CaretRight: react_1.CaretRightIcon,
+    XCircle: react_1.XCircleIcon,
+    XSquare: react_1.XSquareIcon,
+    DownloadSimple: react_1.DownloadSimpleIcon,
+    ArrowLineUpRight: react_1.ArrowLineUpRightIcon,
+    User: react_1.UserIcon,
+    UserCirclePlus: react_1.UserCirclePlusIcon,
+    MapPinLine: react_1.MapPinLineIcon,
+    WarningCircle: react_1.WarningCircleIcon,
+    HighlighterCircle: react_1.HighlighterCircleIcon,
+    Paperclip: react_1.PaperclipIcon,
+    SpeakerHigh: react_1.SpeakerHighIcon,
+    ArrowLeft: react_1.ArrowLeftIcon,
+    CalendarBlank: react_1.CalendarBlankIcon,
+    Trash: react_1.TrashIcon,
+    DotsThreeVertical: react_1.DotsThreeVerticalIcon,
+    DotsThreeCircle: react_1.DotsThreeCircleIcon,
+    DotsThree: react_1.DotsThreeIcon,
+    CaretUp: react_1.CaretUpIcon,
+    CaretDown: react_1.CaretDownIcon,
+    ShareNetwork: react_1.ShareNetworkIcon,
+    X: react_1.XIcon,
+    WhatsappLogo: react_1.WhatsappLogoIcon,
+    FacebookLogo: react_1.FacebookLogoIcon,
+    TwitterLogo: react_1.TwitterLogoIcon,
+    LinkedinLogo: react_1.LinkedinLogoIcon,
+    YoutubeLogo: react_1.YoutubeLogoIcon,
+    InstagramLogo: react_1.InstagramLogoIcon,
+    Globe: react_1.GlobeIcon,
+    Phone: react_1.PhoneIcon,
+    Envelope: react_1.EnvelopeIcon,
+    Checks: react_1.ChecksIcon,
+    Check: react_1.CheckIcon,
+    ArrowClockwise: react_1.ArrowClockwiseIcon,
+    ArrowsClockwise: react_1.ArrowsClockwiseIcon,
+    ArrowsIn: react_1.ArrowsInIcon,
+    ArrowsOut: react_1.ArrowsOutIcon,
+    MapPin: react_1.MapPinIcon,
+    ArrowDown: react_1.ArrowDownIcon,
+    ArrowsDownUp: react_1.ArrowsDownUpIcon,
+    ArrowUp: react_1.ArrowUpIcon,
+    GearSix: react_1.GearSixIcon,
+    Wrench: react_1.WrenchIcon,
+    CheckSquare: react_1.CheckSquareIcon,
+    CheckSquareOffset: react_1.CheckSquareOffsetIcon,
+    Cards: react_1.CardsIcon,
+    SignOut: react_1.SignOutIcon,
+    Swap: react_1.SwapIcon,
+    CheckCircle: react_1.CheckCircleIcon,
+    Circle: react_1.CircleIcon,
+    ImageSquare: react_1.ImageSquareIcon,
+    ListDashes: react_1.ListDashesIcon,
+    ListNumbers: react_1.ListNumbersIcon,
+    ListPlus: react_1.ListPlusIcon,
+    List: react_1.ListIcon,
+    FileArrowUp: react_1.FileArrowUpIcon,
+    VideoCamera: react_1.VideoCameraIcon,
+    Quotes: react_1.QuotesIcon,
+    SpeakerSimpleHigh: react_1.SpeakerSimpleHighIcon,
+    FilePdf: react_1.FilePdfIcon,
+    MagnifyingGlass: react_1.MagnifyingGlassIcon,
+    Eye: react_1.EyeIcon,
+    EyeClosed: react_1.EyeClosedIcon,
+    Minus: react_1.MinusIcon,
+    TextHOne: react_1.TextHOneIcon,
+    TextHTwo: react_1.TextHTwoIcon,
+    TextHThree: react_1.TextHThreeIcon,
+    TextBolder: react_1.TextBolderIcon,
+    TextItalic: react_1.TextItalicIcon,
+    TextUnderline: react_1.TextUnderlineIcon,
+    ArrowRight: react_1.ArrowRightIcon,
+    Sliders: react_1.SlidersIcon,
+    Faders: react_1.FadersIcon,
+    Code: react_1.CodeIcon,
+    SortDescending: react_1.SortDescendingIcon,
+    SortAscending: react_1.SortAscendingIcon,
+    Crosshair: react_1.CrosshairIcon,
+    MicrophoneStage: react_1.MicrophoneStageIcon,
+    File: react_1.FileIcon,
+    FolderSimple: react_1.FolderSimpleIcon,
+    FolderSimpleStar: react_1.FolderSimpleStarIcon,
+    LinkSimple: react_1.LinkSimpleIcon,
+    Laptop: react_1.LaptopIcon,
+    Info: react_1.InfoIcon,
+    DotsSixVertical: react_1.DotsSixVerticalIcon,
+    Bell: react_1.BellIcon,
+    UserSwitch: react_1.UserSwitchIcon,
+    PlusMinus: react_1.PlusMinusIcon,
+    SelectionAll: react_1.SelectionAllIcon,
+    Activity: react_1.ActivityIcon,
+    Browsers: react_1.BrowsersIcon,
+    Cube: react_1.CubeIcon,
+    Table: react_1.TableIcon,
+    UserList: react_1.UserListIcon,
+    Binoculars: react_1.BinocularsIcon,
+    LightbulbFilament: react_1.LightbulbFilamentIcon,
+    Keyboard: react_1.KeyboardIcon,
+    TextAa: react_1.TextAaIcon,
+    ThumbsUp: react_1.ThumbsUpIcon,
+    ChatText: react_1.ChatTextIcon,
+    SlackLogo: react_1.SlackLogoIcon,
+    SquareHalf: react_1.SquareHalfIcon,
+    SquareHalfBottom: react_1.SquareHalfBottomIcon,
+    MagicWand: react_1.MagicWandIcon,
+    CrownSimple: react_1.CrownSimpleIcon,
+    Funnel: react_1.FunnelIcon,
+    ThumbsDown: react_1.ThumbsDownIcon,
+    CopySimple: react_1.CopySimpleIcon,
+    PaperPlaneRight: react_1.PaperPlaneRightIcon,
+    Warning: react_1.WarningIcon,
+    Star: react_1.StarIcon,
+    ArrowsVertical: react_1.ArrowsVerticalIcon,
+    CirclesFour: react_1.CirclesFourIcon,
+    ArrowLineDown: react_1.ArrowLineDownIcon,
+    PaperPlaneTilt: react_1.PaperPlaneTiltIcon,
+    NotePencil: react_1.NotePencilIcon,
+    CircleNotch: react_1.CircleNotchIcon,
+    PaintBucket: react_1.PaintBucketIcon,
+    SquaresFour: react_1.SquaresFourIcon,
+    CaretDoubleLeft: react_1.CaretDoubleLeftIcon,
+    TextIndent: react_1.TextIndentIcon,
+    Share: react_1.ShareIcon,
+    ChartBarHorizontal: react_1.ChartBarHorizontalIcon,
+    GridNine: react_1.GridNineIcon,
+    ChartDonut: react_1.ChartDonutIcon,
     //custom icons
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

package/dist/stories/Oolib/components/Tooltip.stories.js

@@ -18,8 +18,9 @@ exports.Tooltip = void 0;
 var react_1 = __importDefault(require("react"));
 var Tooltip_1 = require("../../../components/Tooltip");
 // import { ButtonPrimary } from '../components/Buttons';
-var phosphor_react_1 = require("phosphor-react");
 var themes_1 = require("../../../themes");
+var icons_1 = require("../../../icons");
+var Info = icons_1.icons.Info;
 exports.default = {
     title: 'Components/Tooltip',
     args: {
@@ -52,6 +53,6 @@ var Tooltip = function (args) {
                 : {} },
             react_1.default.createElement("div", { style: { height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
                 react_1.default.createElement(Tooltip_1.Tooltip, __assign({}, args, { presetTarget: "infoIcon" }),
-                    react_1.default.createElement(phosphor_react_1.Info, { size: 24 }))))));
+                    react_1.default.createElement(Info, { size: 24 }))))));
 };
 exports.Tooltip = Tooltip;

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

@@ -41,7 +41,7 @@ var BarChart = function (args) {
     };
     return (react_1.default.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", padding: '20px' } },
         react_1.default.createElement("div", { style: { border: '1px solid black', padding: '10px' } },
-            react_1.default.createElement(BarChart_1.BarChart, { showPercent: args.showPercent, data: [
+            react_1.default.createElement(BarChart_1.BarChart, { overflowAfterHeight: 300, showPercent: args.showPercent, data: [
                     {
                         display: "Logged In Once",
                         stack1: 45, stack2: 23, stack3: 67, stack4: 12, stack5: 89,

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

@@ -45,10 +45,11 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 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 icons_1 = require("../../../icons");
+var CaretDown = icons_1.icons.CaretDown, DotsThree = icons_1.icons.DotsThree;
 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"])));
@@ -72,7 +73,7 @@ var CustomActionMenuSelectButton = function (_a) {
             width: "2rem",
             justifyContent: "center",
         } },
-        react_1.default.createElement(phosphor_react_1.DotsThree, { size: 16, style: { pointerEvents: 'none' } })));
+        react_1.default.createElement(DotsThree, { size: 16, style: { pointerEvents: 'none' } })));
 };
 var useCalculateWrapperHeight = function (_a) {
     var isExpanded = _a.isExpanded;
@@ -117,7 +118,7 @@ var Accordion = function (_a) {
                 react_1.default.createElement(Typo2_1.UI_BODY_BOLD_SM, null, title)),
             react_1.default.createElement(StyledRightHeaderSection, null,
                 react_1.default.createElement(ArrowWrapper, { isExpanded: isExpanded },
-                    react_1.default.createElement(phosphor_react_1.CaretDown, { size: 16 })),
+                    react_1.default.createElement(CaretDown, { size: 16 })),
                 actionsConfig && (react_1.default.createElement(ActionMenu_1.ActionMenu, { CustomSelectComp: CustomActionMenuSelectButton, actions: actionsConfig })))),
         react_1.default.createElement(StyledContentWrapper, { height: wrapperHeight, style: { overflow: accordionOverflow }, expandAnimationDuration: expandAnimationDuration },
             react_1.default.createElement(StyledContentInnerWrapper, { ref: wrapperRef }, children))));

package/dist/v2/components/Hints/comps/HintsButton.js

@@ -9,15 +9,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HintsButton = void 0;
 var react_1 = __importDefault(require("react"));
-var phosphor_react_1 = require("phosphor-react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Typo2_1 = require("../../Typo2");
 var colors_1 = require("../../../themes/colors");
+var icons_1 = require("../../../../icons");
 var hintHover = colors_1.colors.hintHover, hint = colors_1.colors.hint, white = colors_1.colors.white;
+var Lightbulb = icons_1.icons.Lightbulb;
 var HintsButton = function (_a) {
     var id = _a.id, btnLabel = _a.btnLabel, onClick = _a.onClick;
     return (react_1.default.createElement(StyledButton, { onClick: function () { return onClick(id); } },
-        react_1.default.createElement(phosphor_react_1.Lightbulb, { size: 13, weight: "bold", style: { marginBottom: "0.2rem" } }),
+        react_1.default.createElement(Lightbulb, { size: 13, weight: "bold", style: { marginBottom: "0.2rem" } }),
         react_1.default.createElement(Typo2_1.UI_BODY_SM_DF, null, btnLabel)));
 };
 exports.HintsButton = HintsButton;

package/dist/v2/components/List/comps/ListItem.js

@@ -34,7 +34,7 @@ var ListItem = function (_a) {
     var opIsSelected = function (thisOpData) {
         return value === null || value === void 0 ? void 0 : value.some(function (d) { return d.value === thisOpData.value; });
     };
-    return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none" } },
+    return (react_1.default.createElement(styled_1.StyledListItemWrapper, { index: index, isSelected: isSelected, isFocussed: isFocussed, className: "OKE-Dropdown__option", ref: function (el) { return isFocussed && el && scrollFocussedOpIntoView(el); }, onClick: handleClick, S: S, style: { pointerEvents: disabled && "none", cursor: !disabled && "pointer" } },
         react_1.default.createElement("div", { ref: observerRef, style: {
                 display: "flex",
                 alignItems: "flex-start",

package/dist/v2/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -11,7 +11,6 @@ exports.CheckboxInput = void 0;
 var react_1 = __importDefault(require("react"));
 var icons_1 = require("../../../../../../../icons");
 var themes_1 = require("../../../../../../themes");
-var Tags_1 = require("../../../../../Tags");
 var Typo2_1 = require("../../../../../Typo2");
 var styled_1 = require("../../../../styled");
 var utils_1 = require("../../../../utils");
@@ -19,6 +18,7 @@ var CheckboxButton_1 = require("../CheckboxButton");
 var TextLoader_1 = require("../../../../../../../components/LoadersAndProgress/TextLoader");
 var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../../../../themes/mixins");
+var Tags_1 = require("../../../../../Tags");
 var CheckSquare = icons_1.icons.CheckSquare, XSquare = icons_1.icons.XSquare;
 var red = themes_1.colors.red, grey40 = themes_1.colors.grey40, grey80 = themes_1.colors.grey80, onSecondary = themes_1.colors.onSecondary, invertRed = themes_1.colors.invertRed;
 var UI_BODY_SM_DF_STYLED = (0, styled_components_1.default)(Typo2_1.UI_BODY_SM_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  white-space: normal;\n"], ["\n  ", ";\n  white-space: normal;\n"])), (0, mixins_1.clampText)(2));
@@ -40,7 +40,7 @@ var CheckboxInput = function (_a) {
             margin: "-7px -2.8px -7px -3.2px",
             flexShrink: 0,
         } })); };
-    return option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : inputStyle === "tagSelect" ? (react_1.default.createElement(Tags_1.TagSelect, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: "flex-start" } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: className, onClick: function () {
+    return option.loading ? (react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })) : inputStyle === "tagSelect" ? (react_1.default.createElement(Tags_1.Tag, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: "flex-start" } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: className, onClick: function () {
             return !rightWrongResult && !disabled && onClick && onClick(isSelected, option);
         } },
         react_1.default.createElement("div", { style: { alignSelf: "flex-start" } }, rightWrongResult

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

@@ -23,10 +23,10 @@ var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var DropdownSingle_1 = require("../../../components/Dropdowns/DropdownSingle");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
-var phosphor_react_1 = require("phosphor-react");
 var colors_1 = require("../../themes/colors");
 var icons_1 = require("../../../icons");
 var __1 = require("../../..");
+var List = icons_1.icons.List;
 var Base = function (_a) {
     var id = _a.id, options = _a.options, valueProp = _a.value, onChange = _a.onChange, style = _a.style, errorTabs = _a.errorTabs, disabledTabs = _a.disabledTabs, _b = _a.tabBarStyle, tabBarStyle = _b === void 0 ? '1' : _b, saveValueAsString = _a.saveValueAsString, _c = _a.black, black = _c === void 0 ? false : _c, M = _a.M, S = _a.S, _size = _a.size //use any one of these 3
     ;
@@ -86,5 +86,5 @@ var CustomSelectComp = function (_a) {
         react_1.default.createElement("div", null,
             react_1.default.createElement(Typo2_1.UI_TAG, { style: { color: colors_1.colors.grey40 } }, title),
             react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD, { capitalize: true, style: { color: display ? colors_1.colors.black : colors_1.colors.grey60 } }, display || placeholder)),
-        react_1.default.createElement(phosphor_react_1.List, { size: 18, weight: "bold" })));
+        react_1.default.createElement(List, { size: 18, weight: "bold" })));
 };

package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.js

@@ -59,9 +59,8 @@ var UI_CAPTION_DF_WITH_LINE_CLAMP = (0, styled_components_1.default)(Typo2_1.UI_
     return clampT ? (0, __1.clampText)(3) : '';
 });
 var CustomTooltip = function (props) {
-    var _a;
     var value = props.value, showPercent = props.showPercent, mousePosition = props.mousePosition, activeBar = props.activeBar, breakdownCategoryName = props.breakdownCategoryName;
-    var isActive = activeBar && ((_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.name) === activeBar;
+    var isActive = props.active; //activeBar && value?.[0]?.name === activeBar
     var tooltipWrapperRef = (0, react_1.useRef)(null);
     var calcTooltipTop = function (_a) {
         var _b, _c;
@@ -99,8 +98,8 @@ var CustomTooltip = function (props) {
         // pointerEvents: "none", // Add this to prevent tooltip from interfering with mouse events
     };
     var tooltipLabelLengthRefs = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), rowHeights = _b[0], setRowHeights = _b[1];
-    var _c = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _c[0], setTooltipTextClampStates = _c[1];
+    var _a = (0, react_1.useState)([]), rowHeights = _a[0], setRowHeights = _a[1];
+    var _b = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value.map(function (v) { return true; })) || []), tooltipTextClampStates = _b[0], setTooltipTextClampStates = _b[1];
     (0, react_1.useEffect)(function () {
         if (!tooltipTextClampStates) {
             setTooltipTextClampStates(value === null || value === void 0 ? void 0 : value.map(function (v) { return true; }));

package/dist/v2/components/dataviz/BarChart/comps/Legend/index.js

@@ -21,7 +21,7 @@ var Typo2_1 = require("../../../../Typo2");
 var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
 var Legend = function (_a) {
     var data = _a.data, label = _a.label, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b;
-    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))" }) },
+    return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'scroll' }) },
         label && orientation === 'vertical' && (react_1.default.createElement("div", { style: { paddingBottom: "8px" } },
             react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, label))),
         react_1.default.createElement("div", { style: __assign(__assign({ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row" }, (orientation === 'horizontal' ? { flexWrap: 'wrap' } : {})), { gap: "8px" }) },

package/dist/v2/components/dataviz/BarChart/comps/LegendTooltipGlyph/index.js

@@ -12,6 +12,7 @@ var LegendTooltipGlyph = function (_a) {
             height: size + 'px',
             borderRadius: "50%",
             backgroundColor: color,
+            flexShrink: 0
         } }));
 };
 exports.LegendTooltipGlyph = LegendTooltipGlyph;

package/dist/v2/components/dataviz/BarChart/index.d.ts

@@ -27,7 +27,6 @@ export interface BarChartProps {
     breakdownDisplayType?: BreakdownDisplayType;
     colorIdx?: number;
     summarizeAfterIdx?: number;
-    overflowAfterHeight?: number;
     style?: React.CSSProperties;
 }
 export declare const BarChart: React.FC<BarChartProps>;

package/dist/v2/components/dataviz/BarChart/index.js

@@ -214,7 +214,7 @@ var renderBar = function (_a) {
 };
 var useDecideLegendOrientation = function (options) {
     if (options === void 0) { options = {}; }
-    var _a = options.widthThreshold, widthThreshold = _a === void 0 ? 500 : _a;
+    var _a = options.widthThreshold, widthThreshold = _a === void 0 ? 600 : _a;
     var vizWrapperRef = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)('horizontal'), orientation = _b[0], setOrientation = _b[1];
     (0, react_1.useEffect)(function () {
@@ -306,11 +306,9 @@ var FadeGradientWhenScroll = function (_a) {
 var BarChart = function (_a) {
     var _data = _a.data, valuePath = _a.valuePath, _b = _a.style, style = _b === void 0 ? {} : _b, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, breakdownCategoryName = _a.breakdownCategoryName, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
     _c = _a.labelPath, // basically, if lets say tagCat1 is broken down by tagCat2. then tagCat2's display would be this property
-    labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.breakdownDisplayType, breakdownDisplayType = _d === void 0 ? "grouped" : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.colorIdx, colorIdx = _g === void 0 ? 0 : _g, _h = _a.summarizeAfterIdx, summarizeAfterIdx = _h === void 0 ? undefined : _h, //if a number is defined, then from that 'index' onwards, bars will be compressed into a single bar with a tooltip explaining distribution
-    _j = _a.overflowAfterHeight, //if a number is defined, then from that 'index' onwards, bars will be compressed into a single bar with a tooltip explaining distribution
-    overflowAfterHeight = _j === void 0 ? 550 : _j;
+    labelPath = _c === void 0 ? "name" : _c, onClick = _a.onClick, _d = _a.breakdownDisplayType, breakdownDisplayType = _d === void 0 ? "grouped" : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.showPercent, showPercent = _f === void 0 ? true : _f, _g = _a.colorIdx, colorIdx = _g === void 0 ? 0 : _g, _h = _a.summarizeAfterIdx, summarizeAfterIdx = _h === void 0 ? undefined : _h;
     var isBreakdown = Array.isArray(valuePath);
-    var _k = (0, usePrepareData_1.usePrepareData)({
+    var _j = (0, usePrepareData_1.usePrepareData)({
         _data: _data,
         labelPath: labelPath,
         valuePath: valuePath,
@@ -320,16 +318,16 @@ var BarChart = function (_a) {
         showPercent: showPercent,
         summarizeAfterIdx: summarizeAfterIdx,
         colorIdx: colorIdx
-    }), data = _k.data, dataMaxValue = _k.dataMaxValue, dataToSummarize = _k.dataToSummarize;
-    var _l = useDecideLegendOrientation({
+    }), data = _j.data, dataMaxValue = _j.dataMaxValue, dataToSummarize = _j.dataToSummarize;
+    var _k = useDecideLegendOrientation({
         widthThreshold: 500
-    }), vizWrapperRef = _l.vizWrapperRef, orientation = _l.orientation;
-    var _m = (0, react_1.useState)(undefined), activeBar = _m[0], setActiveBar = _m[1];
+    }), vizWrapperRef = _k.vizWrapperRef, orientation = _k.orientation;
+    var _l = (0, react_1.useState)(undefined), activeBar = _l[0], setActiveBar = _l[1];
     var mousePosition = (0, exports.useTrackMousePosition)().mousePosition;
     // menu options for grouped and stacked
     if (data.length === 0)
         return react_1.default.createElement("div", null, "No data available");
-    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', maxHeight: overflowAfterHeight, overflow: 'scroll' }) },
+    return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'scroll' }) },
         react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
             react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
             dataToSummarize && (react_1.default.createElement(BarChartRenderer, { data: dataToSummarize,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.195.1",
+  "version": "2.196.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -89,6 +89,7 @@
     "@lexical/react": "^0.13.1",
     "@lexical/table": "^0.13.1",
     "@material/material-color-utilities": "^0.3.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",
@@ -103,7 +104,6 @@
     "lodash": "^4.17.21",
     "modularscale-js": "^3.0.1",
     "moment": "^2.24.0",
-    "phosphor-react": "^1.4.1",
     "react-datepicker": "^7.6.0",
     "react-player": "^2.12.0",
     "recharts": "^2.15.3"