@k8slens/lds-tips 0.1.3

package/LICENSE

@@ -0,0 +1,17 @@
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# Lens Design System – React Tips component
+
+## Documentation
+Browse the documentation at [lensapp.github.io/lens-design-system](http://lensapp.github.io/lens-design-system/?path=/docs/tips).
+
+## Usage in React apps
+- run `npm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-tips`
+- import `@k8slens/lds-tokens/lib/es/font-imports.css` in your React app to include fonts
+- import `@k8slens/lds/lib/es/index.css` in your React app to include core styles
+- import `@k8slens/lds-tips/lib/es/index.css` in your React app to include Tips styles
+- Use in a component:
+
+```tsx
+import { Tips } from "@k8slens/lds-tips";
+
+import tipStore from "./path-to-my/tip-store";
+
+export const Component = () => (
+  <Tips
+    tours={tipStore.tours}
+    setNextStepNumber={tipStore.setNextStepNumber}
+    getActiveStep={tipStore.getActiveStep}
+    setSkipAll={tipStore.setSkipAll}
+    skipped={tipStore.skipAll}
+  />
+);
+```
+
+## Example using MobX
+
+### Tours
+```tsx
+// tours.ts
+import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";
+
+export default const tours: Array<Tour> = [
+  {
+    id: "tour-1",
+    steps: [
+      {
+        id: "first-tip",
+        selector: "#target-element-1",
+        theme: "important",
+        content: (
+          <>
+            <h3>This is the first tip</h3>
+            <p>Tip Contents</p>
+          </>
+        ),
+      },
+      {
+        id: "second-tip",
+        selector: "#target-element-2",
+        theme: "important",
+        content: (
+          <>
+            <h3>This is the second tip</h3>
+            <p>Another content</p>
+          </>
+        ),
+      },
+    ],
+  }
+]
+```
+
+### TipStore
+```ts
+// tips-store.ts
+import { action, makeObservable, observable, toJS } from "mobx";
+
+import type { Tour, TipsProps } from "@k8slens/lds-tips/lib/es/Tips/Tips";
+
+import tours from "./tours";
+
+type ActiveSteps = { [key: string]: number };
+
+type TipStoreModel = {
+  skipAll: TipsProps["skipAll"];
+  activeSteps: ActiveSteps;
+};
+
+export class TipStore {
+  @observable
+  store: TipStoreModel = {
+    skipAll: false,
+    activeSteps: {}
+  };
+  tours: Array<Tour> = tours;
+
+  constructor() {
+    super();
+
+    makeObservable(this);
+  }
+
+  @action
+  setSkipAll: TipsProps["setSkipAll"] = () => {
+    this.store.skipAll = true;
+  };
+
+  @action
+  setNextStepNumber: TipsProps["setNextStepNumber"] = (tourId: string) => {
+    let nextStep = 1;
+    if (typeof this.store.activeSteps[tourId] === "number") {
+      nextStep += this.store.activeSteps[tourId];
+    };
+
+    this.store.activeSteps = {
+      ...this.store.activeSteps,
+      [tourId]: nextStep
+    };
+
+    return nextStep;
+  };
+
+  getActiveStep: TipsProps["getActiveStep"] = (tourId: string) => {
+    return this.store.activeSteps[tourId] || 0;
+  };
+}
+```
+
+### Component
+```tsx
+// Component.tsx
+import React from "react";
+import { observer } from "mobx-react";
+
+import { Tips } from "@k8slens/lds-tips";
+
+import { TipStore } from "./TipStore";
+
+interface Props {
+  tipStore: TipStore | null;
+}
+
+export const Component = observer(({ tipStore }: Props) => {
+
+  if (!tipStore) {
+    return null;
+  }
+
+  return (
+    <Tips
+      tours={tipStore.tours}
+      setNextStepNumber={tipStore.setNextStepNumber}
+      getActiveStep={tipStore.getActiveStep}
+      setSkipAll={tipStore.setSkipAll}
+      skipped={tipStore.store.skipAll}
+    />
+  );
+});
+```

package/lib/cjs/Tip/Tip.d.ts

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes } from "react";
+import { Placement } from "@popperjs/core";
+export interface TipProps extends HTMLAttributes<HTMLDivElement> {
+    onDoneClick(): void;
+    onSkipAllClick(): void;
+    /**
+     * Popper placement. Defaults to `auto`
+     */
+    placement?: Placement;
+    theme?: "normal" | "important" | "white";
+    /**
+     * The target element for the popup placement
+     */
+    target: HTMLElement;
+    offset?: [number, number];
+    /**
+     * Optional width of the popup. If not specified, the width will be 20rem
+     */
+    width?: string;
+    /**
+     * Which element to listen for mutations on. Defaults to document.body
+     */
+    mutationsListenerElement?: HTMLElement;
+    /**
+     * Optional ref to the popup.
+     */
+    popupRef?: React.MutableRefObject<HTMLDivElement | null>;
+}
+/**
+ * Tip component. Uses [React Popper](https://popper.js.org/react-popper/) for the popup positioning.
+ */
+declare const Tip: ({ popupRef, className, onDoneClick, onSkipAllClick, target, mutationsListenerElement, theme, id, offset, width, placement, children, ...props }: TipProps) => JSX.Element;
+export default Tip;

package/lib/cjs/Tip/Tip.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),a=require("react-popper"),i=require("lodash"),o=require("rooks"),s=require("./Tip.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t),u=n(r),c={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(r){var n,p=r.popupRef,d=r.className,m=r.onDoneClick,f=r.onSkipAllClick,h=r.target,v=r.mutationsListenerElement,k=void 0===v?document.body:v,b=r.theme,_=r.id,w=r.offset,q=void 0===w?[20,0]:w,C=r.width,E=r.placement,N=void 0===E?"auto":E,g=r.children,y=e.__rest(r,["popupRef","className","onDoneClick","onSkipAllClick","target","mutationsListenerElement","theme","id","offset","width","placement","children"]),R=t.useRef(null),S=t.useRef(k),j=t.useState(),D=j[0],L=j[1],x=t.useCallback((function(e){L(e),p&&(p.current=e)}),[p]),A=t.useMemo((function(){return[{name:"offset",options:{offset:q}},{name:"arrow",options:{padding:6}}]}),[q]),B=a.usePopper(h,D,{placement:N,modifiers:A}),M=B.styles,G=B.attributes,O=B.update,P=i.throttle((function(){var e;null===(e=null==O?void 0:O())||void 0===e||e.catch((function(e){console.error(e)}))}),250);return o.useMutationObserver(S,P,c),l.default.createElement("div",e.__assign({ref:x,id:_},y,{className:u.default(d,s.tip,(n={},n[s.important]="important"===b,n[s.white]="white"===b,n)),style:e.__assign(e.__assign({},M.popper),{width:C||"20rem"})},G.popper),g,l.default.createElement("div",{"data-popper-arrow":!0,ref:R,className:s.caret,style:M.arrow}),l.default.createElement("div",{className:s.buttons},l.default.createElement("button",{onClick:m,className:s.okButton,"aria-controls":_},"Got it!"),l.default.createElement("button",{onClick:f,className:s.skipButton,"aria-controls":_},"Skip all tips")))};

package/lib/cjs/Tip/Tip.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={tip:"lds-tip",important:"lds-tip--important",white:"lds-tip--white",caret:"lds-tip--caret",buttons:"lds-tip--buttons",okButton:"lds-tip--ok-button",skipButton:"lds-tip--skip-button"};

package/lib/cjs/TipPointer/TipPointer.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from "react";
+import type { Step } from "../Tips/Steps";
+interface TipPointerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "id" | "style" | "ref"> {
+    step: Step;
+    onClick: () => void;
+    target: HTMLElement;
+    hidden: boolean;
+    mutationsListenerElement: HTMLElement;
+}
+/**
+ * TipPointer component
+ *
+ * Used with `Tips` component to highlight a tip target.
+ */
+export default function TipPointer({ step, onClick, target, hidden, mutationsListenerElement, ...props }: TipPointerProps): JSX.Element;
+export {};

package/lib/cjs/TipPointer/TipPointer.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),s=require("lodash"),n=require("react-popper"),i=require("rooks"),o=require("./TipPointer.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(t),l=u(r),c={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(r){var u=r.step,f=r.onClick,p=r.target,d=r.hidden,m=r.mutationsListenerElement,_=e.__rest(r,["step","onClick","target","hidden","mutationsListenerElement"]),h=t.useRef(m),v=u.pointerOffset,b=u.placement,q=u.id,g=u.pointerStyles,k=t.useRef(null),y=t.useMemo((function(){return v?[v[1],v[0]]:[0,0]}),[v]),C=t.useState(!1),E=C[0],j=C[1],L=t.useMemo((function(){return[{name:"offset",options:{offset:y}}]}),[y]),M=n.usePopper(p,k.current,{placement:b,modifiers:L}),N=M.styles,x=M.attributes,O=M.update,P=s.throttle((function(){var e;null===(e=null==O?void 0:O())||void 0===e||e.catch((function(e){console.error(e)}))}),250);return t.useEffect((function(){j(!0)}),[]),i.useMutationObserver(h,P,c),a.default.createElement("button",e.__assign({},_,{ref:k,"data-show":E&&!d,id:"pointer-for-".concat(q),onClick:f,className:l.default(_.className,o.pointer,u.pointerClassName),style:e.__assign(e.__assign({},N.popper),g)},x.popper))};

package/lib/cjs/TipPointer/TipPointer.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={pointer:"lds-tip-pointer--pointer",pulse:"lds-tip-pointer--pulse"};

package/lib/cjs/Tips/Step.d.ts

@@ -0,0 +1,13 @@
+import { Step } from "./Steps";
+export interface StepProps {
+    target: HTMLElement;
+    mutationsListenerElement: HTMLElement;
+    goNext(): void;
+    setSkipAll(): void;
+    onPointerClick?(step: Step): void;
+    onClose?(step: Step): void;
+    onNextClick?(step: Step): void;
+    onSkipAllClick?(step: Step): void;
+    step: Step;
+}
+export default function StepComponent({ step, target, goNext, setSkipAll, onPointerClick, onClose, onNextClick, onSkipAllClick, mutationsListenerElement, }: StepProps): JSX.Element;

package/lib/cjs/Tips/Step.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("rooks"),n=require("../TipPointer/TipPointer.js"),i=require("../Tip/Tip.js"),a=require("./Step.module.css.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(e);module.exports=function(l){var o=l.step,r=l.target,s=l.goNext,c=l.setSkipAll,p=l.onPointerClick,f=l.onClose,d=l.onNextClick,k=l.onSkipAllClick,m=l.mutationsListenerElement,C=o.theme,b=o.placement,E=o.popupWidth,h=o.popupOffset,g=o.content,S=e.useState(!1),q=S[0],j=S[1],v=e.useRef(null),w=e.useCallback((function(){j(!0),p&&p(o)}),[o,p,j]),x=e.useCallback((function(){s(),j(!1),d&&d(o)}),[o,d,s]),L=e.useCallback((function(){c(),j(!1),k&&k(o)}),[o,k,c]);return t.useOutsideClick(v,e.useCallback((function(e){e.target.id!=="pointer-for-".concat(o.id)&&(j(!1),q&&f&&f(o))}),[f,o,q])),t.useKey("Escape",e.useCallback((function(){j(!1),q&&f&&f(o)}),[f,o,q])),e.useEffect((function(){j(!1)}),[o]),t.useWindowEventListener("blur",e.useCallback((function(){j(!1),q&&f&&f(o)}),[f,o,q])),u.default.createElement(u.default.Fragment,null,u.default.createElement(n,{onClick:w,step:o,target:r,hidden:q,mutationsListenerElement:m,"aria-expanded":!!q,"aria-controls":o.id,"aria-label":"Show tip"}),u.default.createElement(i,{id:o.id,popupRef:v,className:a.step,placement:b,width:E,offset:h,"data-show":!!q,onDoneClick:x,onSkipAllClick:L,target:r,mutationsListenerElement:m,theme:C,role:"status","aria-hidden":!q},g))};

package/lib/cjs/Tips/Step.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={step:"lds-step"};

package/lib/cjs/Tips/Steps.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { TipProps } from "../Tip/Tip";
+export interface Step {
+    id: string;
+    selector: string;
+    pointer?: string;
+    content: React.ReactNode;
+    placement?: TipProps["placement"];
+    theme?: TipProps["theme"];
+    popupWidth?: TipProps["width"];
+    popupOffset?: TipProps["offset"];
+    pointerOffset?: [number, number];
+    pointerStyles?: React.CSSProperties;
+    pointerClassName?: string;
+    mutationsListenerElementSelector?: string;
+}
+export interface StepsProps {
+    setNextStepNumber(id: string): number;
+    getActiveStep(id: string): number;
+    setSkipAll(): void;
+    onPointerClick?(tourId: string, step: Step): void;
+    onCloseTip?(tourId: string, step: Step): void;
+    onNextClick?(tourId: string, step: Step): void;
+    onSkipAllClick?(tourId: string, step: Step): void;
+    tour: {
+        id: string;
+        steps: Step[];
+    };
+    container?: HTMLElement;
+}
+declare const Steps: ({ setNextStepNumber, getActiveStep, setSkipAll, onPointerClick, onCloseTip, onNextClick, onSkipAllClick, tour, container, }: StepsProps) => React.ReactPortal | null;
+export default Steps;

package/lib/cjs/Tips/Steps.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("react-dom"),i=require("rooks"),l=require("./Step.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(e),o=n(t),r={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(t){var n=t.setNextStepNumber,c=t.getActiveStep,a=t.setSkipAll,s=t.onPointerClick,d=t.onCloseTip,f=t.onNextClick,k=t.onSkipAllClick,C=t.tour,b=t.container,p=void 0===b?document.body:b,S=e.useRef(p),m=e.useState(null),v=m[0],q=m[1],x=C.steps[c(C.id)],y=document.querySelector((null==x?void 0:x.mutationsListenerElementSelector)||"body"),A=e.useCallback((function(){if(x){var e=p.querySelector(null==x?void 0:x.selector);q(null!=e?e:null)}}),[p,x]),N=e.useCallback((function(){s&&s(C.id,x)}),[s,x,C.id]),E=e.useCallback((function(){d&&d(C.id,x)}),[d,x,C.id]),g=e.useCallback((function(){f&&f(C.id,x)}),[f,x,C.id]),L=e.useCallback((function(){k&&k(C.id,x)}),[k,x,C.id]);return i.useMutationObserver(S,A,r),e.useEffect((function(){A()}),[A]),x&&v&&y?o.default.createPortal(u.default.createElement(l,{target:v,step:x,mutationsListenerElement:y,goNext:function(){return n(C.id)},setSkipAll:a,onPointerClick:N,onClose:E,onNextClick:g,onSkipAllClick:L}),p):null};

package/lib/cjs/Tips/Tips.d.ts

@@ -0,0 +1,52 @@
+import type { Step, StepsProps } from "./Steps";
+export interface Tour {
+    id: string;
+    steps: Array<Step>;
+}
+export interface TipsProps {
+    /**
+     * Increment active step number for a given tour id
+     * @param id Tour id
+     */
+    setNextStepNumber(id: string): number;
+    /**
+     * Get the active step number for a given tour id
+     * @param id Tour id
+     */
+    getActiveStep(id: string): number;
+    /**
+     * Set `skipAll` to true
+     */
+    setSkipAll(): void;
+    /**
+     * Skip all tips for all tours
+     */
+    skipAll?: boolean;
+    tours: Array<Tour>;
+    container?: HTMLElement;
+    /**
+     * Track click events on the pointer of a step
+     */
+    onPointerClick?: StepsProps["onPointerClick"];
+    /**
+     * Track close tip events of a step
+     *
+     * Tips are closed by clicking outside the tip, hitting Esc key or on blur
+     */
+    onCloseTip?: StepsProps["onCloseTip"];
+    /**
+     * Track click events on the Got it -button of a step
+     */
+    onNextClick?: StepsProps["onNextClick"];
+    /**
+     * Track click events on the Skip all tips -button of a step
+     */
+    onSkipAllClick?: StepsProps["onSkipAllClick"];
+}
+/**
+ * Provide a `Tour` array to place tips on the page.
+ * Keep track of current step using a store that exposes `skipAll` boolean
+ * as well as `setNextStepNumber`, `getActiveStep` and `setSkipAll` functions.
+ */
+declare const Tips: ({ setNextStepNumber, getActiveStep, setSkipAll, onPointerClick, onCloseTip, onNextClick, onSkipAllClick, skipAll, tours, container, }: TipsProps) => JSX.Element | null;
+export default Tips;

package/lib/cjs/Tips/Tips.js

@@ -0,0 +1 @@
+"use strict";var e=require("react"),t=require("./Steps.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(e);module.exports=function(e){var l=e.setNextStepNumber,i=e.getActiveStep,o=e.setSkipAll,r=e.onPointerClick,u=e.onCloseTip,c=e.onNextClick,a=e.onSkipAllClick,p=e.skipAll,s=void 0!==p&&p,k=e.tours,d=e.container,f=void 0===d?document.body:d;return!0===s?null:n.default.createElement(n.default.Fragment,null,k.map((function(e){return n.default.createElement(t,{key:e.id,setNextStepNumber:l,getActiveStep:i,setSkipAll:o,onPointerClick:r,onCloseTip:u,onNextClick:c,onSkipAllClick:a,tour:e,container:f})})))};

package/lib/cjs/_virtual/_tslib.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.__assign=function(){return exports.__assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},exports.__assign.apply(this,arguments)},exports.__rest=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};

package/lib/cjs/components.d.ts

@@ -0,0 +1,2 @@
+export { default as Tips } from "./Tips/Tips";
+export { default as Tip } from "./Tip/Tip";

package/lib/cjs/index.css

@@ -0,0 +1 @@
+.lds-tip-pointer--pointer{animation:lds-tip-pointer--pulse 2s infinite;border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.69);border-radius:9999px;box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l));height:var(--spacing-base-5);pointer-events:none;position:absolute;visibility:hidden;width:var(--spacing-base-5);z-index:1}.lds-tip-pointer--pointer:hover{background:hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.21);border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.79)}.lds-tip-pointer--pointer[data-popper-reference-hidden]{pointer-events:none;visibility:hidden}.lds-tip-pointer--pointer[data-show=true]{pointer-events:auto;visibility:visible}@keyframes lds-tip-pointer--pulse{0%{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.7)}70%{box-shadow:0 0 0 10px hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}to{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}}.lds-tip{--background-color:var(--color-background-tip-default);--color:var(--color-font-tip-default)}.lds-tip.lds-tip--important{--background-color:var(--color-background-tip-important);--color:var(--color-font-tip-important)}.lds-tip.lds-tip--white{--background-color:var(--color-background-tip-white);--color:var(--color-font-tip-white)}.lds-tip{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);background-color:var(--background-color);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--color);font-size:.75rem;line-height:1rem;padding:var(--spacing-base-md);z-index:14}.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.lds-tip--caret,.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lds-tip--caret{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);height:var(--spacing-base-sm);width:var(--spacing-base-sm)}.lds-tip[data-popper-placement*=bottom]>.lds-tip--caret{top:calc(var(--spacing-base-xs)*-1)}.lds-tip>.lds-tip--caret:after{--tw-rotate:45deg;background-color:var(--background-color);content:" ";display:block;height:var(--spacing-base-2);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--spacing-base-2)}.lds-tip[data-popper-placement*=right] .lds-tip--caret{left:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=left] .lds-tip--caret{right:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=top] .lds-tip--caret{bottom:calc(var(--spacing-base-xs)*-1)}.lds-tip>h1,.lds-tip>h2,.lds-tip>h3,.lds-tip>h4,.lds-tip>h5,.lds-tip>h6{color:var(--color);font-size:var(--typography-heading-size-h2);font-weight:700;line-height:var(--typography-heading-line-height-h2);margin-bottom:var(--spacing-base-lg);margin-top:var(--spacing-base-xs)}.lds-tip>h1:before,.lds-tip>h2:before,.lds-tip>h3:before,.lds-tip>h4:before,.lds-tip>h5:before,.lds-tip>h6:before{margin-bottom:var(--spacing-h2-basekick-cap)}.lds-tip>h1:after,.lds-tip>h2:after,.lds-tip>h3:after,.lds-tip>h4:after,.lds-tip>h5:after,.lds-tip>h6:after{margin-top:var(--spacing-h2-basekick-baseline)}.lds-tip--buttons{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:var(--spacing-base-xl)}@media (min-width:640px){.lds-tip--buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}.lds-tip--ok-button,.lds-tip--skip-button{border-radius:.25rem;padding:var(--spacing-base-md)}.lds-tip--ok-button{background:var(--color-background-tip-button-default);color:var(--color-font-tip-button-default);font-weight:500}.lds-tip--important .lds-tip--ok-button{background:var(--color-background-tip-button-important);color:var(--color-font-tip-button-important)}.lds-tip--white .lds-tip--ok-button{background-color:var(--color-background-tip-button-white);color:var(--color-font-tip-button-white)}.lds-tip--skip-button{color:var(--color);grid-column:3}.lds-tip p{margin-bottom:var(--spacing-base-md)}.lds-step{pointer-events:none;visibility:hidden}.lds-step[data-show=true]{pointer-events:auto;visibility:visible}

package/lib/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/lib/cjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Tips/Tips.js"),r=require("./Tip/Tip.js");exports.Tips=e,exports.Tip=r;

package/lib/es/Tip/Tip.d.ts

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes } from "react";
+import { Placement } from "@popperjs/core";
+export interface TipProps extends HTMLAttributes<HTMLDivElement> {
+    onDoneClick(): void;
+    onSkipAllClick(): void;
+    /**
+     * Popper placement. Defaults to `auto`
+     */
+    placement?: Placement;
+    theme?: "normal" | "important" | "white";
+    /**
+     * The target element for the popup placement
+     */
+    target: HTMLElement;
+    offset?: [number, number];
+    /**
+     * Optional width of the popup. If not specified, the width will be 20rem
+     */
+    width?: string;
+    /**
+     * Which element to listen for mutations on. Defaults to document.body
+     */
+    mutationsListenerElement?: HTMLElement;
+    /**
+     * Optional ref to the popup.
+     */
+    popupRef?: React.MutableRefObject<HTMLDivElement | null>;
+}
+/**
+ * Tip component. Uses [React Popper](https://popper.js.org/react-popper/) for the popup positioning.
+ */
+declare const Tip: ({ popupRef, className, onDoneClick, onSkipAllClick, target, mutationsListenerElement, theme, id, offset, width, placement, children, ...props }: TipProps) => JSX.Element;
+export default Tip;

package/lib/es/Tip/Tip.js

@@ -0,0 +1 @@
+import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import o,{useRef as r,useState as i,useCallback as a,useMemo as n}from"react";import l from"clsx";import{usePopper as s}from"react-popper";import{throttle as c}from"lodash";import{useMutationObserver as m}from"rooks";import p from"./Tip.module.css.js";var u={subtree:!0,childList:!0,attributes:!1,characterData:!1},d=function(d){var f,h=d.popupRef,k=d.className,v=d.onDoneClick,b=d.onSkipAllClick,w=d.target,E=d.mutationsListenerElement,N=void 0===E?document.body:E,C=d.theme,y=d.id,g=d.offset,D=void 0===g?[20,0]:g,L=d.width,S=d.placement,j=void 0===S?"auto":S,x=d.children,A=t(d,["popupRef","className","onDoneClick","onSkipAllClick","target","mutationsListenerElement","theme","id","offset","width","placement","children"]),B=r(null),R=r(N),_=i(),G=_[0],T=_[1],q=a((function(t){T(t),h&&(h.current=t)}),[h]),z=n((function(){return[{name:"offset",options:{offset:D}},{name:"arrow",options:{padding:6}}]}),[D]),F=s(w,G,{placement:j,modifiers:z}),H=F.styles,I=F.attributes,J=F.update,K=c((function(){var t;null===(t=null==J?void 0:J())||void 0===t||t.catch((function(t){console.error(t)}))}),250);return m(R,K,u),o.createElement("div",e({ref:q,id:y},A,{className:l(k,p.tip,(f={},f[p.important]="important"===C,f[p.white]="white"===C,f)),style:e(e({},H.popper),{width:L||"20rem"})},I.popper),x,o.createElement("div",{"data-popper-arrow":!0,ref:B,className:p.caret,style:H.arrow}),o.createElement("div",{className:p.buttons},o.createElement("button",{onClick:v,className:p.okButton,"aria-controls":y},"Got it!"),o.createElement("button",{onClick:b,className:p.skipButton,"aria-controls":y},"Skip all tips")))};export{d as default};

package/lib/es/Tip/Tip.module.css.js

@@ -0,0 +1 @@
+var t={tip:"lds-tip",important:"lds-tip--important",white:"lds-tip--white",caret:"lds-tip--caret",buttons:"lds-tip--buttons",okButton:"lds-tip--ok-button",skipButton:"lds-tip--skip-button"};export{t as default};

package/lib/es/TipPointer/TipPointer.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from "react";
+import type { Step } from "../Tips/Steps";
+interface TipPointerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "id" | "style" | "ref"> {
+    step: Step;
+    onClick: () => void;
+    target: HTMLElement;
+    hidden: boolean;
+    mutationsListenerElement: HTMLElement;
+}
+/**
+ * TipPointer component
+ *
+ * Used with `Tips` component to highlight a tip target.
+ */
+export default function TipPointer({ step, onClick, target, hidden, mutationsListenerElement, ...props }: TipPointerProps): JSX.Element;
+export {};

package/lib/es/TipPointer/TipPointer.js

@@ -0,0 +1 @@
+import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import r,{useRef as o,useMemo as n,useState as i,useEffect as s}from"react";import a from"clsx";import{throttle as p}from"lodash";import{usePopper as l}from"react-popper";import{useMutationObserver as c}from"rooks";import m from"./TipPointer.module.css.js";var f={subtree:!0,childList:!0,attributes:!1,characterData:!1};function u(u){var d=u.step,h=u.onClick,v=u.target,b=u.hidden,k=u.mutationsListenerElement,C=t(u,["step","onClick","target","hidden","mutationsListenerElement"]),y=o(k),E=d.pointerOffset,L=d.placement,N=d.id,g=d.pointerStyles,j=o(null),x=n((function(){return E?[E[1],E[0]]:[0,0]}),[E]),_=i(!1),w=_[0],D=_[1],O=n((function(){return[{name:"offset",options:{offset:x}}]}),[x]),P=l(v,j.current,{placement:L,modifiers:O}),S=P.styles,T=P.attributes,q=P.update,z=p((function(){var t;null===(t=null==q?void 0:q())||void 0===t||t.catch((function(t){console.error(t)}))}),250);return s((function(){D(!0)}),[]),c(y,z,f),r.createElement("button",e({},C,{ref:j,"data-show":w&&!b,id:"pointer-for-".concat(N),onClick:h,className:a(C.className,m.pointer,d.pointerClassName),style:e(e({},S.popper),g)},T.popper))}export{u as default};

package/lib/es/TipPointer/TipPointer.module.css.js

@@ -0,0 +1 @@
+var p={pointer:"lds-tip-pointer--pointer",pulse:"lds-tip-pointer--pulse"};export{p as default};

package/lib/es/Tips/Step.d.ts

@@ -0,0 +1,13 @@
+import { Step } from "./Steps";
+export interface StepProps {
+    target: HTMLElement;
+    mutationsListenerElement: HTMLElement;
+    goNext(): void;
+    setSkipAll(): void;
+    onPointerClick?(step: Step): void;
+    onClose?(step: Step): void;
+    onNextClick?(step: Step): void;
+    onSkipAllClick?(step: Step): void;
+    step: Step;
+}
+export default function StepComponent({ step, target, goNext, setSkipAll, onPointerClick, onClose, onNextClick, onSkipAllClick, mutationsListenerElement, }: StepProps): JSX.Element;

package/lib/es/Tips/Step.js

@@ -0,0 +1 @@
+import t,{useState as e,useRef as n,useCallback as o,useEffect as i}from"react";import{useOutsideClick as r,useKey as a,useWindowEventListener as l}from"rooks";import p from"../TipPointer/TipPointer.js";import c from"../Tip/Tip.js";import s from"./Step.module.css.js";function m(m){var u=m.step,f=m.target,d=m.goNext,k=m.setSkipAll,h=m.onPointerClick,C=m.onClose,E=m.onNextClick,g=m.onSkipAllClick,S=m.mutationsListenerElement,x=u.theme,T=u.placement,j=u.popupWidth,w=u.popupOffset,A=u.content,L=e(!1),N=L[0],P=L[1],b=n(null),v=o((function(){P(!0),h&&h(u)}),[u,h,P]),D=o((function(){d(),P(!1),E&&E(u)}),[u,E,d]),F=o((function(){k(),P(!1),g&&g(u)}),[u,g,k]);return r(b,o((function(t){t.target.id!=="pointer-for-".concat(u.id)&&(P(!1),N&&C&&C(u))}),[C,u,N])),a("Escape",o((function(){P(!1),N&&C&&C(u)}),[C,u,N])),i((function(){P(!1)}),[u]),l("blur",o((function(){P(!1),N&&C&&C(u)}),[C,u,N])),t.createElement(t.Fragment,null,t.createElement(p,{onClick:v,step:u,target:f,hidden:N,mutationsListenerElement:S,"aria-expanded":!!N,"aria-controls":u.id,"aria-label":"Show tip"}),t.createElement(c,{id:u.id,popupRef:b,className:s.step,placement:T,width:j,offset:w,"data-show":!!N,onDoneClick:D,onSkipAllClick:F,target:f,mutationsListenerElement:S,theme:x,role:"status","aria-hidden":!N},A))}export{m as default};

package/lib/es/Tips/Step.module.css.js

@@ -0,0 +1 @@
+var e={step:"lds-step"};export{e as default};

package/lib/es/Tips/Steps.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { TipProps } from "../Tip/Tip";
+export interface Step {
+    id: string;
+    selector: string;
+    pointer?: string;
+    content: React.ReactNode;
+    placement?: TipProps["placement"];
+    theme?: TipProps["theme"];
+    popupWidth?: TipProps["width"];
+    popupOffset?: TipProps["offset"];
+    pointerOffset?: [number, number];
+    pointerStyles?: React.CSSProperties;
+    pointerClassName?: string;
+    mutationsListenerElementSelector?: string;
+}
+export interface StepsProps {
+    setNextStepNumber(id: string): number;
+    getActiveStep(id: string): number;
+    setSkipAll(): void;
+    onPointerClick?(tourId: string, step: Step): void;
+    onCloseTip?(tourId: string, step: Step): void;
+    onNextClick?(tourId: string, step: Step): void;
+    onSkipAllClick?(tourId: string, step: Step): void;
+    tour: {
+        id: string;
+        steps: Step[];
+    };
+    container?: HTMLElement;
+}
+declare const Steps: ({ setNextStepNumber, getActiveStep, setSkipAll, onPointerClick, onCloseTip, onNextClick, onSkipAllClick, tour, container, }: StepsProps) => React.ReactPortal | null;
+export default Steps;

package/lib/es/Tips/Steps.js

@@ -0,0 +1 @@
+import t,{useRef as e,useState as o,useCallback as i,useEffect as n}from"react";import r from"react-dom";import{useMutationObserver as l}from"rooks";import c from"./Step.js";var u={subtree:!0,childList:!0,attributes:!1,characterData:!1},d=function(d){var a=d.setNextStepNumber,s=d.getActiveStep,m=d.setSkipAll,p=d.onPointerClick,f=d.onCloseTip,k=d.onNextClick,S=d.onSkipAllClick,C=d.tour,v=d.container,b=void 0===v?document.body:v,x=e(b),A=o(null),N=A[0],y=A[1],g=C.steps[s(C.id)],E=document.querySelector((null==g?void 0:g.mutationsListenerElementSelector)||"body"),L=i((function(){if(g){var t=b.querySelector(null==g?void 0:g.selector);y(null!=t?t:null)}}),[b,g]),P=i((function(){p&&p(C.id,g)}),[p,g,C.id]),h=i((function(){f&&f(C.id,g)}),[f,g,C.id]),q=i((function(){k&&k(C.id,g)}),[k,g,C.id]),j=i((function(){S&&S(C.id,g)}),[S,g,C.id]);return l(x,L,u),n((function(){L()}),[L]),g&&N&&E?r.createPortal(t.createElement(c,{target:N,step:g,mutationsListenerElement:E,goNext:function(){return a(C.id)},setSkipAll:m,onPointerClick:P,onClose:h,onNextClick:q,onSkipAllClick:j}),b):null};export{d as default};

package/lib/es/Tips/Tips.d.ts

@@ -0,0 +1,52 @@
+import type { Step, StepsProps } from "./Steps";
+export interface Tour {
+    id: string;
+    steps: Array<Step>;
+}
+export interface TipsProps {
+    /**
+     * Increment active step number for a given tour id
+     * @param id Tour id
+     */
+    setNextStepNumber(id: string): number;
+    /**
+     * Get the active step number for a given tour id
+     * @param id Tour id
+     */
+    getActiveStep(id: string): number;
+    /**
+     * Set `skipAll` to true
+     */
+    setSkipAll(): void;
+    /**
+     * Skip all tips for all tours
+     */
+    skipAll?: boolean;
+    tours: Array<Tour>;
+    container?: HTMLElement;
+    /**
+     * Track click events on the pointer of a step
+     */
+    onPointerClick?: StepsProps["onPointerClick"];
+    /**
+     * Track close tip events of a step
+     *
+     * Tips are closed by clicking outside the tip, hitting Esc key or on blur
+     */
+    onCloseTip?: StepsProps["onCloseTip"];
+    /**
+     * Track click events on the Got it -button of a step
+     */
+    onNextClick?: StepsProps["onNextClick"];
+    /**
+     * Track click events on the Skip all tips -button of a step
+     */
+    onSkipAllClick?: StepsProps["onSkipAllClick"];
+}
+/**
+ * Provide a `Tour` array to place tips on the page.
+ * Keep track of current step using a store that exposes `skipAll` boolean
+ * as well as `setNextStepNumber`, `getActiveStep` and `setSkipAll` functions.
+ */
+declare const Tips: ({ setNextStepNumber, getActiveStep, setSkipAll, onPointerClick, onCloseTip, onNextClick, onSkipAllClick, skipAll, tours, container, }: TipsProps) => JSX.Element | null;
+export default Tips;

package/lib/es/Tips/Tips.js

@@ -0,0 +1 @@
+import e from"react";import t from"./Steps.js";var o=function(o){var i=o.setNextStepNumber,n=o.getActiveStep,l=o.setSkipAll,r=o.onPointerClick,c=o.onCloseTip,p=o.onNextClick,k=o.onSkipAllClick,u=o.skipAll,a=void 0!==u&&u,m=o.tours,s=o.container,S=void 0===s?document.body:s;return!0===a?null:e.createElement(e.Fragment,null,m.map((function(o){return e.createElement(t,{key:o.id,setNextStepNumber:i,getActiveStep:n,setSkipAll:l,onPointerClick:r,onCloseTip:c,onNextClick:p,onSkipAllClick:k,tour:o,container:S})})))};export{o as default};

package/lib/es/_virtual/_tslib.js

@@ -0,0 +1 @@
+var r=function(){return r=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},r.apply(this,arguments)};function t(r,t){var e={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&t.indexOf(n)<0&&(e[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(e[n[o]]=r[n[o]])}return e}export{r as __assign,t as __rest};

package/lib/es/components.d.ts

@@ -0,0 +1,2 @@
+export { default as Tips } from "./Tips/Tips";
+export { default as Tip } from "./Tip/Tip";

package/lib/es/index.css

@@ -0,0 +1 @@
+.lds-tip-pointer--pointer{animation:lds-tip-pointer--pulse 2s infinite;border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.69);border-radius:9999px;box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l));height:var(--spacing-base-5);pointer-events:none;position:absolute;visibility:hidden;width:var(--spacing-base-5);z-index:1}.lds-tip-pointer--pointer:hover{background:hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.21);border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.79)}.lds-tip-pointer--pointer[data-popper-reference-hidden]{pointer-events:none;visibility:hidden}.lds-tip-pointer--pointer[data-show=true]{pointer-events:auto;visibility:visible}@keyframes lds-tip-pointer--pulse{0%{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.7)}70%{box-shadow:0 0 0 10px hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}to{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}}.lds-tip{--background-color:var(--color-background-tip-default);--color:var(--color-font-tip-default)}.lds-tip.lds-tip--important{--background-color:var(--color-background-tip-important);--color:var(--color-font-tip-important)}.lds-tip.lds-tip--white{--background-color:var(--color-background-tip-white);--color:var(--color-font-tip-white)}.lds-tip{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);background-color:var(--background-color);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--color);font-size:.75rem;line-height:1rem;padding:var(--spacing-base-md);z-index:14}.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.lds-tip--caret,.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lds-tip--caret{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);height:var(--spacing-base-sm);width:var(--spacing-base-sm)}.lds-tip[data-popper-placement*=bottom]>.lds-tip--caret{top:calc(var(--spacing-base-xs)*-1)}.lds-tip>.lds-tip--caret:after{--tw-rotate:45deg;background-color:var(--background-color);content:" ";display:block;height:var(--spacing-base-2);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--spacing-base-2)}.lds-tip[data-popper-placement*=right] .lds-tip--caret{left:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=left] .lds-tip--caret{right:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=top] .lds-tip--caret{bottom:calc(var(--spacing-base-xs)*-1)}.lds-tip>h1,.lds-tip>h2,.lds-tip>h3,.lds-tip>h4,.lds-tip>h5,.lds-tip>h6{color:var(--color);font-size:var(--typography-heading-size-h2);font-weight:700;line-height:var(--typography-heading-line-height-h2);margin-bottom:var(--spacing-base-lg);margin-top:var(--spacing-base-xs)}.lds-tip>h1:before,.lds-tip>h2:before,.lds-tip>h3:before,.lds-tip>h4:before,.lds-tip>h5:before,.lds-tip>h6:before{margin-bottom:var(--spacing-h2-basekick-cap)}.lds-tip>h1:after,.lds-tip>h2:after,.lds-tip>h3:after,.lds-tip>h4:after,.lds-tip>h5:after,.lds-tip>h6:after{margin-top:var(--spacing-h2-basekick-baseline)}.lds-tip--buttons{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:var(--spacing-base-xl)}@media (min-width:640px){.lds-tip--buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}.lds-tip--ok-button,.lds-tip--skip-button{border-radius:.25rem;padding:var(--spacing-base-md)}.lds-tip--ok-button{background:var(--color-background-tip-button-default);color:var(--color-font-tip-button-default);font-weight:500}.lds-tip--important .lds-tip--ok-button{background:var(--color-background-tip-button-important);color:var(--color-font-tip-button-important)}.lds-tip--white .lds-tip--ok-button{background-color:var(--color-background-tip-button-white);color:var(--color-font-tip-button-white)}.lds-tip--skip-button{color:var(--color);grid-column:3}.lds-tip p{margin-bottom:var(--spacing-base-md)}.lds-step{pointer-events:none;visibility:hidden}.lds-step[data-show=true]{pointer-events:auto;visibility:visible}

package/lib/es/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/lib/es/index.js

@@ -0,0 +1 @@
+export{default as Tips}from"./Tips/Tips.js";export{default as Tip}from"./Tip/Tip.js";

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@k8slens/lds-tips",
+  "version": "0.1.3",
+  "description": "Lens Design System – React Tips component",
+  "author": "Mirantis Inc",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/es/index.js",
+  "types": "./lib/es/index.d.ts",
+  "type": "module",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "start": "npm run rollup-watch",
+    "build": "npm run clean && npm run rollup",
+    "rollup-watch": "rollup -c --watch --waitForBundleInput",
+    "rollup": "rollup -c",
+    "clean": "rimraf lib",
+    "test": "jest",
+    "lint": "eslint .",
+    "format": "eslint --fix ."
+  },
+  "dependencies": {
+    "@k8slens/lds": "^0.11.2"
+  },
+  "devDependencies": {
+    "@k8slens/lds-icons": "^0.9.2",
+    "@k8slens/lds-tokens": "^0.12.2",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@storybook/react": "6.5.13",
+    "@testing-library/react": "13.4.0"
+  },
+  "peerDependencies": {
+    "@popperjs/core": "^2.11.6",
+    "@types/react": "18.0.24",
+    "@types/react-dom": "18.0.8",
+    "clsx": "^1.2.1",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
+    "rooks": "^7.4.3"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|less)$": "<rootDir>/../../__mocks__/CSSStub.js",
+      "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
+    }
+  },
+  "gitHead": "586e729ead7372b6fd5586adb2734db1c7fe61b1"
+}