@heliux-org/design-system-core 0.0.121 → 0.0.125

package/dist/types/components/Comments/Comments.d.ts

@@ -13,13 +13,20 @@ export interface User {
 export interface CommentFormProps {
     currentUser: User;
     onCommentSubmitted: (text: string) => Promise<boolean>;
+    isLabel?: boolean;
+    label?: {
+        status: "external" | "internal";
+    };
+    onClickAttachment?: () => void;
 }
 export interface CommentsProps extends CommentFormProps {
     comments: CommentProps[];
 }
-export declare function Comments({ comments, currentUser, onCommentSubmitted }: CommentsProps): import("react/jsx-runtime").JSX.Element;
-export declare function CommentForm({ onCommentSubmitted, currentUser }: CommentFormProps): import("react/jsx-runtime").JSX.Element;
-export declare function Comment({ author, commentedAt, label, text }: CommentProps): import("react/jsx-runtime").JSX.Element;
+export declare function Comments({ comments, currentUser, onCommentSubmitted, isLabel, label, onClickAttachment }: CommentsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommentForm({ onCommentSubmitted, currentUser, isLabel, label, onClickAttachment }: CommentFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function Comment({ author, commentedAt, label, text, currentUser }: {
+    currentUser: User;
+} & CommentProps): import("react/jsx-runtime").JSX.Element;
 export declare function UserCard({ user }: {
     user: User;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Comments/Comments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Comments.d.ts","sourceRoot":"","sources":["../../../../src/components/Comments/Comments.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AASzB,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,IAAI;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,EAAE,IAAI,CAAC;IAClB,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC5B;AAGD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,aAAa,2CAWpF;AAED,wBAAgB,WAAW,CAAC,EAAE,kBAAkB,EAAE,WAAW,EAAE,EAAE,gBAAgB,2CAoChF;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,2CAqBzE;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAchD"}
+{"version":3,"file":"Comments.d.ts","sourceRoot":"","sources":["../../../../src/components/Comments/Comments.tsx"],"names":[],"mappings":"AAEA,OAAO,iBAAiB,CAAC;AAYzB,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,WAAW,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,IAAI;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,WAAW,EAAE,IAAI,CAAC;IAClB,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,UAAU,GAAG,UAAU,CAAA;KAAE,CAAC;IAC5C,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACnD,QAAQ,EAAE,YAAY,EAAE,CAAC;CAC5B;AAGD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,OAAe,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,aAAa,2CAW/H;AAED,wBAAgB,WAAW,CAAC,EAAE,kBAAkB,EAAE,WAAW,EAAE,OAAe,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,gBAAgB,2CAyE3H;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,GAAG,YAAY,2CAe9G;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,2CAchD"}

package/dist/types/components/Icon/Icons/components/Lines.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface LinesProps extends React.SVGAttributes<SVGElement> {
+    size?: string | number;
+}
+declare const Lines: React.FC<LinesProps>;
+export default Lines;
+//# sourceMappingURL=Lines.d.ts.map

package/dist/types/components/Icon/Icons/components/Lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lines.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Icon/Icons/components/Lines.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IACnE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AACD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAK/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/components/Icon/Icons/components/Notifications.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface NotificationsProps extends React.SVGAttributes<SVGElement> {
+    size?: string | number;
+}
+declare const Notifications: React.FC<NotificationsProps>;
+export default Notifications;
+//# sourceMappingURL=Notifications.d.ts.map

package/dist/types/components/Icon/Icons/components/Notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Icon/Icons/components/Notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IAC3E,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AACD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAK/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/types/components/Icon/Icons/components/Update.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface UpdateProps extends React.SVGAttributes<SVGElement> {
+    size?: string | number;
+}
+declare const Update: React.FC<UpdateProps>;
+export default Update;
+//# sourceMappingURL=Update.d.ts.map

package/dist/types/components/Icon/Icons/components/Update.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Update.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Icon/Icons/components/Update.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AACD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAKjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heliux-org/design-system-core",
-  "version": "0.0.121",
+  "version": "0.0.125",
   "description": "Official Heliux design system resources for application development in React.js",
   "main": "./dist/main.js",
   "types": "./dist/types/index.d.ts",
@@ -298,5 +298,5 @@
       "PR: Icon 💎": "New Icons"
     }
   },
-  "gitHead": "edb05afd6de024f371532e7694b816828ab83c1e"
+  "gitHead": "db5201833d9fd39d30ad54367f726a52c147b1e4"
 }

package/src/components/Comments/Comments.tsx

@@ -3,11 +3,14 @@ import React, { useCallback, useState } from 'react';
 import './comments.scss';
 import Avatar from '../Avatar/Avatar';
 import TextAreaField from '../TextAreaField/TextAreaField';
-import { ButtonType } from '../Button';
 import Flex from '../Flex/Flex';
 import { AvatarType } from '../Avatar';
 import Button from '../Button/Button';
 import { FlexAlign, FlexDirection, FlexGap } from '../Flex';
+import Info from '../Icon/Icons/components/Info';
+import Text from '../Text/Text';
+import Icon from '../Icon/Icon';
+import Attach from '../Icon/Icons/components/Attach';
 
 export interface CommentProps {
     text: string;
@@ -25,6 +28,9 @@ export interface User {
 export interface CommentFormProps {
     currentUser: User;
     onCommentSubmitted: (text: string) => Promise<boolean>;
+    isLabel?: boolean;
+    label?: { status: "external" | "internal" };
+    onClickAttachment?: () => void;
 }
 
 export interface CommentsProps extends CommentFormProps {
@@ -32,20 +38,20 @@ export interface CommentsProps extends CommentFormProps {
 }
 
 
-export function Comments({ comments, currentUser, onCommentSubmitted }: CommentsProps) {
+export function Comments({ comments, currentUser, onCommentSubmitted, isLabel = false, label, onClickAttachment }: CommentsProps) {
     return (
         <div className={'comments'}>
-            <CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} />
             {comments.length > 0 && (
-                <Flex direction={FlexDirection.COLUMN} gap={FlexGap.MEDIUM} align={FlexAlign.STRETCH}>
-                    {comments.map((comment, i) => <Comment {...comment} key={i} />)}
+                <Flex direction={FlexDirection.COLUMN} style={{ marginBottom: "var(--spacing-large)" }} gap={FlexGap.MEDIUM} align={FlexAlign.STRETCH}>
+                    {comments.map((comment, i) => <Comment {...comment} currentUser={currentUser} key={i} />)}
                 </Flex>
             )}
+            <CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} isLabel={isLabel} label={label} onClickAttachment={onClickAttachment} />
         </div>
     );
 }
 
-export function CommentForm({ onCommentSubmitted, currentUser }: CommentFormProps) {
+export function CommentForm({ onCommentSubmitted, currentUser, isLabel = false, label, onClickAttachment }: CommentFormProps) {
     const [isWaiting, setIsWaiting] = useState<boolean>(false);
     const [text, setText] = useState<string>('');
 
@@ -60,48 +66,79 @@ export function CommentForm({ onCommentSubmitted, currentUser }: CommentFormProp
     }, [onCommentSubmitted]);
     return (
         <div className={'comments-top'}>
-            <h3 className={'comments-header'}>Comments</h3>
-            <TextAreaField
-                disabled={isWaiting}
-                title={`${currentUser.name} | Add a comment`}
-                onChange={setText}
-                placeholder={'Add a comment'}
-                rows={2}
-                value={text}
-            />
+            <Flex gap={Flex.gaps.SMALL}>
+                {isLabel && label.status === "internal" && (
+                    <>
+                        <Icon
+                            iconType={Icon.type.SVG}
+                            style={{ color: "#757575" }}
+                            icon={Info}
+                            iconSize={20}
+                            clickable={false}
+                        />
+                        <Text type={Text.types.TEXT1} color={Text.colors.SECONDARY}>
+                            This is an internal conversation
+                        </Text>
+                    </>
+                )}
+                {isLabel && label.status === "external" && (
+                    <>
+                        <Icon
+                            iconType={Icon.type.SVG}
+                            style={{ color: "#FF0020" }}
+                            icon={Info}
+                            iconSize={20}
+                            clickable={false}
+                        />
+                        <Text type={Text.types.TEXT1} style={{ color: "#BB0018" }}>
+                            This is an external conversation
+                        </Text>
+                    </>
+                )}
+            </Flex>
             <div className={'comments-buttons'}>
+                <TextAreaField
+                    disabled={isWaiting}
+                    onChange={setText}
+                    placeholder={'What’s on your mind...'}
+                    rows={2}
+                    value={text}
+                />
                 <Button
                     disabled={!text || isWaiting}
                     onClick={() => onSubmit(text)}
-                    size={'small'}
-                    kind={ButtonType.SECONDARY}
+                    size={Button.sizes.SMALL}
+                    style={{ width: "100%" }}
                 >
-                    Submit Comment
+                    Send
                 </Button>
             </div>
+            <Button
+                onClick={onClickAttachment}
+                size={Button.sizes.SMALL}
+                kind={Button.kinds.TERTIARY}
+                style={{ marginTop: "var(--spacing-small)" }}
+            >
+                <Icon iconType={Icon.type.SVG} style={{ color: "#375D81", transform: "rotate(30deg)" }} icon={Attach} iconSize={17} clickable={false} />
+                <Text type={Text.types.TEXT2} style={{ color: "#375D81", marginTop: "2px" }}>Attachment</Text>
+            </Button>
         </div>
     );
 }
 
-export function Comment({ author, commentedAt, label, text }: CommentProps) {
+export function Comment({ author, commentedAt, label, text, currentUser }: { currentUser: User } & CommentProps) {
     return (
         <Flex direction={FlexDirection.COLUMN} align={FlexAlign.STRETCH} className={'comment'}>
             <Flex direction={FlexDirection.ROW} gap={FlexGap.SMALL} className={'comment-data'}>
                 {!!label && (
-                    <div className={'comment-label'}>
-                        {label}
-                    </div>
+                    <Text className={'comment-label'} type={Text.types.TEXT2}>{label}</Text>
                 )}
                 <div className={'comment-user'}>
                     {author && <UserCard user={author} />}
                 </div>
-                <div className={'comment-date'}>
-                    {commentedAt.toLocaleDateString()}
-                </div>
+                <Text className={'comment-date'} color={Text.colors.SECONDARY} type={Text.types.TEXT2}>{commentedAt.toLocaleString()}</Text>
             </Flex>
-            <div className={'comment-text'}>
-                {text}
-            </div>
+            <Text className={`comment-text ${currentUser.id === author.id && "comment-currentUser"}`} type={Text.types.TEXT1}>{text}</Text>
         </Flex>
     );
 }
@@ -116,7 +153,7 @@ export function UserCard({ user }: { user: User }) {
                 text={toInitials(user.name)}
             />
             <div className={'comment-user-name'}>
-                {user.name}
+                <Text type={Text.types.TEXT2} weight={Text.weights.BOLD}>{user.name}</Text>
             </div>
         </Flex>
     );

package/src/components/Comments/comments.scss

@@ -1,6 +1,7 @@
 @import "~@heliux-org/ui-style/dist/mixins";
 
 .comments {
+    overflow: auto;
 
     .comments-top {
         margin-bottom: var(--spacing-medium);
@@ -11,10 +12,18 @@
             margin-bottom: var(--spacing-small)
         }
 
+        &-buttons {
+            width: 600px;
+        }
+
         &-user {
             @include vibe-text(text1, normal);
         }
 
+        &-currentUser {
+            background-color: var(--surface-level-200);
+        }
+
         &-label {
             @include vibe-text(text1, normal);
         }
@@ -22,5 +31,15 @@
         &-date {
             @include vibe-text(text1, normal);
         }
+
+        &-text {
+            padding: 10px;
+            border-radius: 6px 0px 6px 6px;
+            margin-left: var(--spacing-xl);
+            width: fit-content;
+            max-width: 15rem;
+            white-space: normal;
+            overflow-wrap: break-word;
+        }
     }
 }

package/src/components/NewTable/components/Row/Row.module.scss

@@ -41,7 +41,7 @@ $focus-ring-input-light: inset 0 0 5px rgba(0, 0, 0, 0.3); // Example value
   &:focus,
   &:focus-visible {
     outline: none;
-    box-shadow: $focus-ring-input-light;
+    background-color: var(--surface-selected);
   }
 }
 

package/dist/components/ScrollableContainer/ScrollableContainer.js

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-require("./ScrollableContainer.module.scss");
-const classnames_1 = __importDefault(require("classnames"));
-function ScrollableContainer({ allowVerticalScrolling = false, children }) {
-    const containerRef = (0, react_1.useRef)(null);
-    const [height, setHeight] = (0, react_1.useState)(0);
-    const [width, setWidth] = (0, react_1.useState)(0);
-    const [isPositioned, setIsPositioned] = (0, react_1.useState)(false);
-    const [layoutCounter, setLayoutCounter] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        setIsPositioned(false);
-    }, [layoutCounter]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (!isPositioned) {
-            const rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            if (rect) {
-                setHeight(window.innerHeight - rect.top);
-                setWidth(rect.width);
-                setIsPositioned(true);
-            }
-        }
-    }, [isPositioned]);
-    const containerStyle = isPositioned
-        ? { width: `${width}px`, height: `${height}px` }
-        : {};
-    const containerClassName = (0, classnames_1.default)({
-        'hds-scrollable-container': true,
-        'allow-vertical-scrolling': allowVerticalScrolling,
-    });
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: containerClassName, ref: containerRef, style: containerStyle }, { children: isPositioned && children })));
-}
-exports.default = ScrollableContainer;
-//# sourceMappingURL=ScrollableContainer.js.map

package/dist/components/ScrollableContainer/ScrollableContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.js","sourceRoot":"","sources":["../../../src/components/ScrollableContainer/ScrollableContainer.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAAuE;AACvE,6CAA2C;AAC3C,4DAAoC;AAUpC,SAAwB,mBAAmB,CAAC,EAAE,sBAAsB,GAAG,KAAK,EAAE,QAAQ,EAA4B;IAC9G,MAAM,YAAY,GAAG,IAAA,cAAM,EAAwB,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACjE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAE9D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,eAAe,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACX,IAAI,CAAC,YAAY,EAAE;YACf,MAAM,IAAI,GAAG,MAAA,YAAY,CAAC,OAAO,0CAAE,qBAAqB,EAAE,CAAC;YAE3D,IAAI,IAAI,EAAE;gBACN,SAAS,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;gBACzC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrB,eAAe,CAAC,IAAI,CAAC,CAAC;aACzB;SACJ;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,YAAY;QAC/B,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,EAAE;QAChD,CAAC,CAAC,EAAE,CAAC;IAET,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EAAC;QAClC,0BAA0B,EAAE,IAAI;QAChC,0BAA0B,EAAE,sBAAsB;KACrD,CAAC,CAAC;IAEH,OAAO,CACH,8CAAK,SAAS,EAAE,kBAAkB,EAAE,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,cAAc,gBACvE,YAAY,IAAI,QAAQ,IACvB,CACT,CAAC;AACN,CAAC;AArCD,sCAqCC"}

package/dist/components/ScrollableContainer/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ScrollableContainer"), exports);
-//# sourceMappingURL=index.js.map

package/dist/components/ScrollableContainer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ScrollableContainer/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC"}

package/dist/esm/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import './ScrollableContainer.module.scss';
-import { VibeComponentProps } from "../../types";
-export interface ScrollableContainerProps extends VibeComponentProps {
-    allowVerticalScrolling?: boolean;
-    children: React.ReactNode;
-    layoutCounter: number;
-}
-export default function ScrollableContainer({ allowVerticalScrolling, children }: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ScrollableContainer.d.ts.map

package/dist/esm/components/ScrollableContainer/ScrollableContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollableContainer/ScrollableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAChE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;CAEzB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,sBAA8B,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAqCjH"}

package/dist/esm/components/ScrollableContainer/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ScrollableContainer";
-//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ScrollableContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollableContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/esm/src/components/ScrollableContainer/ScrollableContainer.js

@@ -1,2 +0,0 @@
-import{slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as t}from"react";import"./ScrollableContainer.module.scss.js";import e from"classnames";function n(n){var a=n.allowVerticalScrolling,c=void 0!==a&&a,s=n.children,d=i(null),u=o(0),m=r(u,2),p=m[0],f=m[1],v=o(0),g=r(v,2),h=g[0],w=g[1],b=o(!1),j=r(b,2),x=j[0],y=j[1],B=o(0),C=r(B,2);t((function(){y(!1)}),[C[0]]),t((function(){var r;if(!x){var l=null===(r=d.current)||void 0===r?void 0:r.getBoundingClientRect();l&&(f(window.innerHeight-l.top),w(l.width),y(!0))}}),[x]);var H=x?{width:"".concat(h,"px"),height:"".concat(p,"px")}:{},S=e({"hds-scrollable-container":!0,"allow-vertical-scrolling":c});return l("div",Object.assign({className:S,ref:d,style:H},{children:x&&s}))}export{n as default};
-//# sourceMappingURL=ScrollableContainer.js.map

package/dist/esm/src/components/ScrollableContainer/ScrollableContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.js","sources":["../../../../../src/components/ScrollableContainer/ScrollableContainer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport './ScrollableContainer.module.scss';\nimport classNames from 'classnames';\nimport { VibeComponentProps } from \"../../types\";\n\nexport interface ScrollableContainerProps extends VibeComponentProps {\n    allowVerticalScrolling?: boolean;\n    children: React.ReactNode;\n    layoutCounter: number;\n\n}\n\nexport default function ScrollableContainer({ allowVerticalScrolling = false, children }: ScrollableContainerProps) {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState<number>(0);\n    const [isPositioned, setIsPositioned] = useState<boolean>(false);\n    const [layoutCounter, setLayoutCounter] = useState<number>(0);\n\n    useEffect(() => {\n        setIsPositioned(false);\n    }, [layoutCounter]);\n\n    useEffect(() => {\n        if (!isPositioned) {\n            const rect = containerRef.current?.getBoundingClientRect();\n\n            if (rect) {\n                setHeight(window.innerHeight - rect.top);\n                setWidth(rect.width);\n                setIsPositioned(true);\n            }\n        }\n    }, [isPositioned]);\n\n    const containerStyle = isPositioned\n        ? { width: `${width}px`, height: `${height}px` }\n        : {};\n\n    const containerClassName = classNames({\n        'hds-scrollable-container': true,\n        'allow-vertical-scrolling': allowVerticalScrolling,\n    });\n\n    return (\n        <div className={containerClassName} ref={containerRef} style={containerStyle}>\n            {isPositioned && children}\n        </div>\n    );\n}"],"names":["ScrollableContainer","_ref","_ref$allowVerticalScr","allowVerticalScrolling","children","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","height","setHeight","_useState3","_useState4","width","setWidth","_useState5","_useState6","isPositioned","setIsPositioned","_useState7","_useState8","useEffect","rect","_a","current","getBoundingClientRect","window","innerHeight","top","containerStyle","concat","containerClassName","classNames","_jsx","Object","assign","className","ref","style"],"mappings":"0PAYc,SAAUA,EAAmBC,GAAuE,IAAAC,EAAAD,EAApEE,uBAAAA,OAAyB,IAAHD,GAAQA,EAAEE,EAAQH,EAARG,SACpEC,EAAeC,EAA8B,MACnDC,EAA4BC,EAAiB,GAAEC,EAAAC,EAAAH,EAAA,GAAxCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GACxBI,EAA0BL,EAAiB,GAAEM,EAAAJ,EAAAG,EAAA,GAAtCE,EAAKD,EAAA,GAAEE,EAAQF,EAAA,GACtBG,EAAwCT,GAAkB,GAAMU,EAAAR,EAAAO,EAAA,GAAzDE,EAAYD,EAAA,GAAEE,EAAeF,EAAA,GACpCG,EAA0Cb,EAAiB,GAAEc,EAAAZ,EAAAW,EAAA,GAE7DE,GAAU,WACNH,GAAgB,EACpB,GAAG,CAJiBE,EAAA,KAMpBC,GAAU,iBACN,IAAKJ,EAAc,CACf,IAAMK,EAA2B,QAApBC,EAAApB,EAAaqB,eAAO,IAAAD,OAAA,EAAAA,EAAEE,wBAE/BH,IACAZ,EAAUgB,OAAOC,YAAcL,EAAKM,KACpCd,EAASQ,EAAKT,OACdK,GAAgB,GAEvB,CACL,GAAG,CAACD,IAEJ,IAAMY,EAAiBZ,EACjB,CAAEJ,MAAKiB,GAAAA,OAAKjB,EAAS,MAAEJ,OAAM,GAAAqB,OAAKrB,EAAM,OACxC,GAEAsB,EAAqBC,EAAW,CAClC,4BAA4B,EAC5B,2BAA4B/B,IAGhC,OACIgC,EAAK,MAAAC,OAAAC,OAAA,CAAAC,UAAWL,EAAoBM,IAAKlC,EAAcmC,MAAOT,GACzD,CAAA3B,SAAAe,GAAgBf,IAG7B"}

package/dist/esm/src/components/ScrollableContainer/ScrollableContainer.module.scss.js

@@ -1,2 +0,0 @@
-!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],o="s_id-aaf4d199900a_0_0_111";if(n.querySelector("#"+o))return;const l=document.createElement("style");l.id=o,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}(".hds-scrollable-container_6b219a2584 {\n  box-sizing: border-box;\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n.hds-scrollable-container_6b219a2584 * {\n  box-sizing: border-box;\n}\n.hds-scrollable-container_6b219a2584.allow-vertical-scrolling_2ec344d4bc {\n  overflow-y: scroll;\n}");
-//# sourceMappingURL=ScrollableContainer.module.scss.js.map

package/dist/esm/src/components/ScrollableContainer/ScrollableContainer.module.scss.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/mocked_classnames_esm/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import './ScrollableContainer.module.scss';
-import { VibeComponentProps } from "../../types";
-export interface ScrollableContainerProps extends VibeComponentProps {
-    allowVerticalScrolling?: boolean;
-    children: React.ReactNode;
-    layoutCounter: number;
-}
-export default function ScrollableContainer({ allowVerticalScrolling, children }: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ScrollableContainer.d.ts.map

package/dist/mocked_classnames_esm/components/ScrollableContainer/ScrollableContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollableContainer/ScrollableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAChE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;CAEzB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,sBAA8B,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAqCjH"}

package/dist/mocked_classnames_esm/components/ScrollableContainer/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ScrollableContainer";
-//# sourceMappingURL=index.d.ts.map

package/dist/mocked_classnames_esm/components/ScrollableContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollableContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/mocked_classnames_esm/src/components/ScrollableContainer/ScrollableContainer.js

@@ -1,2 +0,0 @@
-import{slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as t}from"react";import"./ScrollableContainer.module.scss.js";import e from"classnames";function n(n){var a=n.allowVerticalScrolling,c=void 0!==a&&a,s=n.children,d=i(null),u=o(0),m=r(u,2),p=m[0],f=m[1],v=o(0),g=r(v,2),h=g[0],w=g[1],b=o(!1),j=r(b,2),x=j[0],y=j[1],B=o(0),C=r(B,2);t((function(){y(!1)}),[C[0]]),t((function(){var r;if(!x){var l=null===(r=d.current)||void 0===r?void 0:r.getBoundingClientRect();l&&(f(window.innerHeight-l.top),w(l.width),y(!0))}}),[x]);var H=x?{width:"".concat(h,"px"),height:"".concat(p,"px")}:{},S=e({"hds-scrollable-container":!0,"allow-vertical-scrolling":c});return l("div",Object.assign({className:S,ref:d,style:H},{children:x&&s}))}export{n as default};
-//# sourceMappingURL=ScrollableContainer.js.map

package/dist/mocked_classnames_esm/src/components/ScrollableContainer/ScrollableContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.js","sources":["../../../../../src/components/ScrollableContainer/ScrollableContainer.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport './ScrollableContainer.module.scss';\nimport classNames from 'classnames';\nimport { VibeComponentProps } from \"../../types\";\n\nexport interface ScrollableContainerProps extends VibeComponentProps {\n    allowVerticalScrolling?: boolean;\n    children: React.ReactNode;\n    layoutCounter: number;\n\n}\n\nexport default function ScrollableContainer({ allowVerticalScrolling = false, children }: ScrollableContainerProps) {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState<number>(0);\n    const [isPositioned, setIsPositioned] = useState<boolean>(false);\n    const [layoutCounter, setLayoutCounter] = useState<number>(0);\n\n    useEffect(() => {\n        setIsPositioned(false);\n    }, [layoutCounter]);\n\n    useEffect(() => {\n        if (!isPositioned) {\n            const rect = containerRef.current?.getBoundingClientRect();\n\n            if (rect) {\n                setHeight(window.innerHeight - rect.top);\n                setWidth(rect.width);\n                setIsPositioned(true);\n            }\n        }\n    }, [isPositioned]);\n\n    const containerStyle = isPositioned\n        ? { width: `${width}px`, height: `${height}px` }\n        : {};\n\n    const containerClassName = classNames({\n        'hds-scrollable-container': true,\n        'allow-vertical-scrolling': allowVerticalScrolling,\n    });\n\n    return (\n        <div className={containerClassName} ref={containerRef} style={containerStyle}>\n            {isPositioned && children}\n        </div>\n    );\n}"],"names":["ScrollableContainer","_ref","_ref$allowVerticalScr","allowVerticalScrolling","children","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","height","setHeight","_useState3","_useState4","width","setWidth","_useState5","_useState6","isPositioned","setIsPositioned","_useState7","_useState8","useEffect","rect","_a","current","getBoundingClientRect","window","innerHeight","top","containerStyle","concat","containerClassName","classNames","_jsx","Object","assign","className","ref","style"],"mappings":"0PAYc,SAAUA,EAAmBC,GAAuE,IAAAC,EAAAD,EAApEE,uBAAAA,OAAyB,IAAHD,GAAQA,EAAEE,EAAQH,EAARG,SACpEC,EAAeC,EAA8B,MACnDC,EAA4BC,EAAiB,GAAEC,EAAAC,EAAAH,EAAA,GAAxCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GACxBI,EAA0BL,EAAiB,GAAEM,EAAAJ,EAAAG,EAAA,GAAtCE,EAAKD,EAAA,GAAEE,EAAQF,EAAA,GACtBG,EAAwCT,GAAkB,GAAMU,EAAAR,EAAAO,EAAA,GAAzDE,EAAYD,EAAA,GAAEE,EAAeF,EAAA,GACpCG,EAA0Cb,EAAiB,GAAEc,EAAAZ,EAAAW,EAAA,GAE7DE,GAAU,WACNH,GAAgB,EACpB,GAAG,CAJiBE,EAAA,KAMpBC,GAAU,iBACN,IAAKJ,EAAc,CACf,IAAMK,EAA2B,QAApBC,EAAApB,EAAaqB,eAAO,IAAAD,OAAA,EAAAA,EAAEE,wBAE/BH,IACAZ,EAAUgB,OAAOC,YAAcL,EAAKM,KACpCd,EAASQ,EAAKT,OACdK,GAAgB,GAEvB,CACL,GAAG,CAACD,IAEJ,IAAMY,EAAiBZ,EACjB,CAAEJ,MAAKiB,GAAAA,OAAKjB,EAAS,MAAEJ,OAAM,GAAAqB,OAAKrB,EAAM,OACxC,GAEAsB,EAAqBC,EAAW,CAClC,4BAA4B,EAC5B,2BAA4B/B,IAGhC,OACIgC,EAAK,MAAAC,OAAAC,OAAA,CAAAC,UAAWL,EAAoBM,IAAKlC,EAAcmC,MAAOT,GACzD,CAAA3B,SAAAe,GAAgBf,IAG7B"}

package/dist/mocked_classnames_esm/src/components/ScrollableContainer/ScrollableContainer.module.scss.js

@@ -1,2 +0,0 @@
-!function(e){if("undefined"==typeof document)return;const n=document.head||document.getElementsByTagName("head")[0],o="s_id-aaf4d199900a_0_0_111";if(n.querySelector("#"+o))return;const l=document.createElement("style");l.id=o,n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.appendChild(document.createTextNode(e))}(".hds-scrollable-container {\n  box-sizing: border-box;\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n.hds-scrollable-container * {\n  box-sizing: border-box;\n}\n.hds-scrollable-container.allow-vertical-scrolling {\n  overflow-y: scroll;\n}");
-//# sourceMappingURL=ScrollableContainer.module.scss.js.map

package/dist/mocked_classnames_esm/src/components/ScrollableContainer/ScrollableContainer.module.scss.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/types/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import './ScrollableContainer.module.scss';
-import { VibeComponentProps } from "../../types";
-export interface ScrollableContainerProps extends VibeComponentProps {
-    allowVerticalScrolling?: boolean;
-    children: React.ReactNode;
-    layoutCounter: number;
-}
-export default function ScrollableContainer({ allowVerticalScrolling, children }: ScrollableContainerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ScrollableContainer.d.ts.map

package/dist/types/components/ScrollableContainer/ScrollableContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollableContainer/ScrollableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,mCAAmC,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAChE,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;CAEzB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,sBAA8B,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAqCjH"}

package/dist/types/components/ScrollableContainer/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ScrollableContainer";
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/ScrollableContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollableContainer/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}