@telia-ace/widget-components-area 1.0.3 → 1.0.6

package/dist/area.js

@@ -0,0 +1,228 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { WidgetRenderState } from "@telia-ace/widget-core";
+import { genericComponentStyling, Component } from "@telia-ace/widget-types-grid";
+import { TransitionComponent, Grid, useComponentDescriptor, useRenderState, useContext, useProperties, useChildren, useContainer, useScroll, createEmptyComponent, ColumnContext, filterCssProps, Dropdown, DrawerAnimationType, Drawer, Button, filterCssPropsStyle, paddedBorderTabStyle, Text, SymbolBadge } from "@telia-ace/widget-ui";
+import { appendClassNames, Logger } from "@telia-ace/widget-utilities";
+import React, { forwardRef, useCallback } from "react";
+import styled, { css } from "styled-components";
+import { A as AreaMode } from "./index2.js";
+const Area$1 = forwardRef((_a, ref) => {
+  var _b = _a, { children, className, renderState, animation } = _b, other = __objRest(_b, ["children", "className", "renderState", "animation"]);
+  if (!renderState) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(TransitionComponent, {
+    mountOnEnter: renderState !== WidgetRenderState.hidden,
+    timeout: 200,
+    in: renderState === WidgetRenderState.open,
+    transitions: animation,
+    unmountOnExit: renderState === WidgetRenderState.closed
+  }, (state, css2) => /* @__PURE__ */ React.createElement(Wrapper$1, __spreadProps(__spreadValues({}, other), {
+    animationCss: css2,
+    "data-state": state,
+    ref,
+    className: appendClassNames("humany-animated-area", className)
+  }), children));
+});
+const Wrapper$1 = styled(Grid)`
+    ${genericComponentStyling}
+    ${(p) => !!p.animationCss && p.animationCss}
+  ${(p) => !!p.scrollableCss && p.scrollableCss}
+  text-size-adjust: 100%;
+    input::-ms-clear {
+        display: none;
+    }
+    ${(p) => p.hidden && p["data-state"] === "exited" && css`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`;
+const Area = (_c) => {
+  var _d = _c, { className } = _d, other = __objRest(_d, ["className"]);
+  const { name } = useComponentDescriptor();
+  const renderState = useRenderState();
+  const context = useContext();
+  const properties = useProperties();
+  const children = useChildren();
+  const container = useContainer();
+  const { gap = "0" } = context;
+  const _a = properties, {
+    columns = 1,
+    animation = "none",
+    scrollable = false,
+    mode = AreaMode.Static,
+    trigger = {},
+    fullScreen,
+    header
+  } = _a, areaProperties = __objRest(_a, [
+    "columns",
+    "animation",
+    "scrollable",
+    "mode",
+    "trigger",
+    "fullScreen",
+    "header"
+  ]);
+  const _b = trigger, { size = 24, symbol, label, ariaLabel } = _b, otherTriggerProps = __objRest(_b, ["size", "symbol", "label", "ariaLabel"]);
+  const [scrollableCss, elem] = useScroll(scrollable);
+  const setRef = useCallback((node) => {
+    const { events } = container.get("$widget");
+    events.dispatch("widget:area-rendered", {
+      name,
+      properties,
+      element: node
+    });
+    elem.current = node;
+    return node;
+  }, [properties, renderState]);
+  if (!children.length) {
+    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
+      className: appendClassNames(className, "humany-area")
+    }));
+  }
+  const props = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, other), {
+    className: appendClassNames(className, "humany-area", `humany-area-${name}`),
+    scrollableCss
+  }), areaProperties), {
+    columns,
+    gap,
+    renderState,
+    animation,
+    hidden: renderState === WidgetRenderState.hidden,
+    ref: setRef
+  });
+  const content = (() => {
+    if (animation !== "none") {
+      return /* @__PURE__ */ React.createElement(ColumnContext.Provider, {
+        value: columns
+      }, /* @__PURE__ */ React.createElement(Area$1, __spreadValues({}, props), children.map((child) => /* @__PURE__ */ React.createElement(Component, {
+        key: child.id,
+        id: child.id,
+        branch: "default"
+      }))));
+    }
+    if (renderState === WidgetRenderState.closed) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(ColumnContext.Provider, {
+      value: columns
+    }, /* @__PURE__ */ React.createElement(Wrapper, __spreadValues({}, props), children.map((child) => /* @__PURE__ */ React.createElement(Component, {
+      key: child.id,
+      id: child.id,
+      branch: "default"
+    }))));
+  })();
+  if (mode === AreaMode.Static) {
+    return content;
+  }
+  const triggerButton = /* @__PURE__ */ React.createElement(Trigger, __spreadValues({
+    className: "humany-area-trigger",
+    title: ariaLabel
+  }, filterCssProps(otherTriggerProps)), label && /* @__PURE__ */ React.createElement(TriggerLabel, null, label), symbol && /* @__PURE__ */ React.createElement(TriggerSymbolBadge, {
+    symbol,
+    size
+  }));
+  if (mode === AreaMode.Dropdown) {
+    return /* @__PURE__ */ React.createElement(Dropdown, {
+      trigger: triggerButton
+    }, content);
+  }
+  if (mode === AreaMode.Drawer) {
+    const drawerAnimation = Object.values(DrawerAnimationType).includes(animation) && {
+      type: animation
+    } || void 0;
+    return /* @__PURE__ */ React.createElement(Drawer, {
+      header,
+      animation: drawerAnimation,
+      fullScreen,
+      trigger: triggerButton
+    }, content);
+  }
+  if (mode === AreaMode.Modal) {
+    Logger.warn("modal area not implemented");
+    return null;
+  }
+  return null;
+};
+const Trigger = styled(Button)`
+    display: flex;
+    align-items: inherit;
+    align-self: center;
+    width: fit-content;
+    height: fit-content;
+    ${filterCssPropsStyle}
+
+    ${(p) => p.theme.fonts && `
+    font-family: ${p.theme.fonts.type};
+    font-size: ${p.theme.fonts.normal};
+  `}
+
+  &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && paddedBorderTabStyle;
+}};
+    }
+`;
+const TriggerLabel = styled(Text)`
+    margin: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} 0 0;
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+`;
+const TriggerSymbolBadge = styled(SymbolBadge)`
+    path {
+        fill: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const Wrapper = styled(Grid)`
+    ${genericComponentStyling}
+    ${(p) => !!p.scrollableCss && p.scrollableCss}
+  text-size-adjust: 100%;
+    input::-ms-clear {
+        display: none;
+    }
+    ${(p) => p.hidden && css`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`;
+export { Area as default };
+//# sourceMappingURL=area.js.map

package/dist/area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.js","sources":["../src/animated-area.tsx","../src/area.tsx"],"sourcesContent":["import { WidgetRenderState } from '@telia-ace/widget-core';\r\nimport { genericComponentStyling } from '@telia-ace/widget-types-grid';\r\nimport { Grid, TransitionComponent } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { forwardRef } from 'react';\r\nimport { TransitionStatus } from 'react-transition-group/Transition';\r\nimport styled, { css } from 'styled-components';\r\n\r\nconst Area: React.FC<any> = forwardRef(\r\n    ({ children, className, renderState, animation, ...other }, ref) => {\r\n        if (!renderState) {\r\n            return null;\r\n        }\r\n\r\n        return (\r\n            <TransitionComponent\r\n                mountOnEnter={renderState !== WidgetRenderState.hidden}\r\n                timeout={200}\r\n                in={renderState === WidgetRenderState.open}\r\n                transitions={animation}\r\n                unmountOnExit={renderState === WidgetRenderState.closed}\r\n            >\r\n                {(state: TransitionStatus, css?: string) => (\r\n                    <Wrapper\r\n                        {...other}\r\n                        animationCss={css}\r\n                        data-state={state}\r\n                        ref={ref}\r\n                        className={appendClassNames('humany-animated-area', className)}\r\n                    >\r\n                        {children}\r\n                    </Wrapper>\r\n                )}\r\n            </TransitionComponent>\r\n        );\r\n    }\r\n);\r\n\r\nexport default Area;\r\n\r\nconst Wrapper = styled(Grid)<any>`\r\n    ${genericComponentStyling}\r\n    ${(p) => !!p.animationCss && p.animationCss}\r\n  ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n  text-size-adjust: 100%;\r\n    input::-ms-clear {\r\n        display: none;\r\n    }\r\n    ${(p) =>\r\n        p.hidden &&\r\n        p['data-state'] === 'exited' &&\r\n        css`\r\n            visibility: collapse;\r\n            pointer-events: none;\r\n        `};\r\n`;\r\n","import { WidgetRenderState } from '@telia-ace/widget-core';\r\nimport { Component, genericComponentStyling } from '@telia-ace/widget-types-grid';\r\nimport {\r\n    Button,\r\n    ColumnContext,\r\n    createEmptyComponent,\r\n    Drawer,\r\n    DrawerAnimationType,\r\n    Dropdown,\r\n    filterCssProps,\r\n    filterCssPropsStyle,\r\n    Grid,\r\n    paddedBorderTabStyle,\r\n    SymbolBadge,\r\n    Text,\r\n    useChildren,\r\n    useComponentDescriptor,\r\n    useContainer,\r\n    useContext,\r\n    useProperties,\r\n    useRenderState,\r\n    useScroll,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames, Logger } from '@telia-ace/widget-utilities';\r\nimport { Widget } from '@webprovisions/platform';\r\nimport React, { useCallback } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport AnimatedArea from './animated-area';\r\nimport { AreaComponentProps, AreaMode } from './area-component';\r\n\r\nconst Area: React.FC<any> = ({ className, ...other }) => {\r\n    const { name } = useComponentDescriptor();\r\n    const renderState = useRenderState();\r\n    const context = useContext();\r\n    const properties = useProperties<AreaComponentProps>();\r\n    const children = useChildren();\r\n    const container = useContainer();\r\n\r\n    const { gap = '0' } = context;\r\n    const {\r\n        columns = 1,\r\n        animation = 'none',\r\n        scrollable = false,\r\n        mode = AreaMode.Static,\r\n        trigger = {},\r\n        fullScreen,\r\n        header,\r\n        ...areaProperties\r\n    } = properties;\r\n\r\n    const { size = 24, symbol, label, ariaLabel, ...otherTriggerProps } = trigger;\r\n\r\n    const [scrollableCss, elem] = useScroll(scrollable);\r\n\r\n    const setRef = useCallback(\r\n        (node: HTMLDivElement) => {\r\n            const { events } = container.get('$widget') as Widget;\r\n            events.dispatch('widget:area-rendered', {\r\n                name,\r\n                properties,\r\n                element: node,\r\n            });\r\n\r\n            elem.current = node;\r\n            return node;\r\n        },\r\n        [properties, renderState]\r\n    );\r\n\r\n    if (!children.length) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-area'),\r\n        });\r\n    }\r\n\r\n    const props = {\r\n        ...other,\r\n        className: appendClassNames(className, 'humany-area', `humany-area-${name}`),\r\n        scrollableCss,\r\n        ...areaProperties,\r\n        columns,\r\n        gap,\r\n        renderState,\r\n        animation,\r\n        hidden: renderState === WidgetRenderState.hidden,\r\n        ref: setRef,\r\n    };\r\n\r\n    const content = (() => {\r\n        if (animation !== 'none') {\r\n            return (\r\n                <ColumnContext.Provider value={columns}>\r\n                    <AnimatedArea {...props}>\r\n                        {children.map((child) => (\r\n                            <Component key={child.id} id={child.id} branch=\"default\" />\r\n                        ))}\r\n                    </AnimatedArea>\r\n                </ColumnContext.Provider>\r\n            );\r\n        }\r\n\r\n        if (renderState === WidgetRenderState.closed) {\r\n            return null;\r\n        }\r\n\r\n        return (\r\n            <ColumnContext.Provider value={columns}>\r\n                <Wrapper {...props}>\r\n                    {children.map((child) => (\r\n                        <Component key={child.id} id={child.id} branch=\"default\" />\r\n                    ))}\r\n                </Wrapper>\r\n            </ColumnContext.Provider>\r\n        );\r\n    })();\r\n\r\n    if (mode === AreaMode.Static) {\r\n        return content;\r\n    }\r\n\r\n    const triggerButton = (\r\n        <Trigger\r\n            className=\"humany-area-trigger\"\r\n            title={ariaLabel}\r\n            {...filterCssProps(otherTriggerProps)}\r\n        >\r\n            {label && <TriggerLabel>{label}</TriggerLabel>}\r\n            {symbol && <TriggerSymbolBadge symbol={symbol} size={size} />}\r\n        </Trigger>\r\n    );\r\n\r\n    if (mode === AreaMode.Dropdown) {\r\n        return <Dropdown trigger={triggerButton}>{content}</Dropdown>;\r\n    }\r\n\r\n    if (mode === AreaMode.Drawer) {\r\n        const drawerAnimation =\r\n            (Object.values(DrawerAnimationType).includes(animation as any) && {\r\n                type: animation as DrawerAnimationType,\r\n            }) ||\r\n            undefined;\r\n        return (\r\n            <Drawer\r\n                header={header}\r\n                animation={drawerAnimation}\r\n                fullScreen={fullScreen}\r\n                trigger={triggerButton}\r\n            >\r\n                {content}\r\n            </Drawer>\r\n        );\r\n    }\r\n\r\n    if (mode === AreaMode.Modal) {\r\n        Logger.warn('modal area not implemented');\r\n        return null;\r\n    }\r\n\r\n    return null;\r\n};\r\n\r\nexport default Area;\r\n\r\nconst Trigger = styled(Button)`\r\n    display: flex;\r\n    align-items: inherit;\r\n    align-self: center;\r\n    width: fit-content;\r\n    height: fit-content;\r\n    ${filterCssPropsStyle}\r\n\r\n    ${(p) =>\r\n        p.theme.fonts &&\r\n        `\r\n    font-family: ${p.theme.fonts.type};\r\n    font-size: ${p.theme.fonts.normal};\r\n  `}\r\n\r\n  &:focus {\r\n        ${(p: any) => p.theme.accessibility?.isTabbing && paddedBorderTabStyle};\r\n    }\r\n`;\r\n\r\nconst TriggerLabel = styled(Text)`\r\n    margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\r\n    color: ${(p) => p.theme.colors?.text};\r\n`;\r\n\r\nconst TriggerSymbolBadge = styled(SymbolBadge)`\r\n    path {\r\n        fill: ${(p) => p.theme.colors?.text};\r\n    }\r\n`;\r\n\r\nconst Wrapper = styled(Grid)<any>`\r\n    ${genericComponentStyling}\r\n    ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n  text-size-adjust: 100%;\r\n    input::-ms-clear {\r\n        display: none;\r\n    }\r\n    ${(p) =>\r\n        p.hidden &&\r\n        css`\r\n            visibility: collapse;\r\n            pointer-events: none;\r\n        `};\r\n`;\r\n"],"names":["Area","Wrapper","AnimatedArea"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { a as default } from "./index2.js";
+import "@telia-ace/widget-ui";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/index2.js

@@ -0,0 +1,14 @@
+import { createReactComponent } from "@telia-ace/widget-ui";
+var AreaMode = /* @__PURE__ */ ((AreaMode2) => {
+  AreaMode2["Static"] = "static";
+  AreaMode2["Drawer"] = "drawer";
+  AreaMode2["Dropdown"] = "dropdown";
+  AreaMode2["Modal"] = "modal";
+  return AreaMode2;
+})(AreaMode || {});
+const AreaComponent = (container) => {
+  return createReactComponent(container, "area", import("./area.js"), (component) => {
+  });
+};
+export { AreaMode as A, AreaComponent as a };
+//# sourceMappingURL=index2.js.map

package/dist/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":["../src/area-component.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\ntype Symbol = {\r\n    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\r\n    content: string;\r\n};\r\n\r\nexport enum AreaMode {\r\n    Static = 'static',\r\n    Drawer = 'drawer',\r\n    Dropdown = 'dropdown',\r\n    Modal = 'modal',\r\n}\r\n\r\nexport type AreaComponentProps = {\r\n    mode: AreaMode;\r\n    animation?: string;\r\n    fullScreen?: boolean;\r\n    columns?: number;\r\n    scrollable?: boolean;\r\n    header?: string;\r\n    trigger?: {\r\n        symbol?: Symbol;\r\n        label?: string;\r\n        size?: number;\r\n        ariaLabel?: string;\r\n    };\r\n};\r\n\r\nexport const AreaComponent = (container: Container) => {\r\n    return createReactComponent(container, 'area', import('./area'), (component) => {});\r\n};\r\n\r\nexport default AreaComponent;\r\n"],"names":[],"mappings":";AAQY,IAAA,6BAAA,cAAL;AACM,YAAA,YAAA;AACA,YAAA,YAAA;AACE,YAAA,cAAA;AACH,YAAA,WAAA;AAJA,SAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAsBC,MAAA,gBAAgB,CAAC,cAAyB;AACnD,SAAO,qBAAqB,WAAW,QAAQ,OAAO,cAAW,CAAC,cAAc;AAAA,EAAA,CAAE;AACtF;;"}

package/package.json

@@ -1,35 +1,36 @@
 {
     "name": "@telia-ace/widget-components-area",
-    "version": "1.0.3",
+    "version": "1.0.6",
     "description": "Area component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "main": "lib/index.js",
-    "module": "lib-esm/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
         "README.md",
-        "lib/",
-        "lib-esm/"
+        "dist/"
     ],
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
-        "clean": "cleandir lib && cleandir lib-esm",
-        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+        "clean": "rimraf ./dist",
+        "precompile": "tsc -emitDeclarationOnly",
+        "compile": "vite build"
     },
     "sideEffects": false,
-    "typings": "lib/index.d.ts",
     "dependencies": {
-        "@telia-ace/widget-core": "^1.0.1",
-        "@telia-ace/widget-types-grid": "^1.0.3",
-        "@telia-ace/widget-ui": "^1.0.3",
+        "@telia-ace/widget-core": "^1.0.5",
+        "@telia-ace/widget-types-grid": "^1.0.9",
+        "@telia-ace/widget-ui": "^1.0.9",
         "@telia-ace/widget-utilities": "^1.0.1",
-        "@webprovisions/platform": "^1.1.2",
+        "@webprovisions/platform": "^1.1.2"
+    },
+    "peerDependencies": {
         "react": "^16.8.0",
         "react-dom": "^16.8.0",
         "react-transition-group": "^4.2.2",
@@ -41,5 +42,5 @@
         "@types/react-transition-group": "^4.2.3",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "5440857927191297b8094bdfef392876e9cf0cef"
+    "gitHead": "2cb095d784f90b8a0783f02898c67ca3c46169cf"
 }

package/lib/animated-area.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Area: React.FC<any>;
-export default Area;

package/lib/animated-area.js

@@ -1,70 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var widget_core_1 = require("@telia-ace/widget-core");
-var widget_types_grid_1 = require("@telia-ace/widget-types-grid");
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var widget_utilities_1 = require("@telia-ace/widget-utilities");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var Area = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, renderState = _a.renderState, animation = _a.animation, other = __rest(_a, ["children", "className", "renderState", "animation"]);
-    if (!renderState) {
-        return null;
-    }
-    return (react_1.default.createElement(widget_ui_1.TransitionComponent, { mountOnEnter: renderState !== widget_core_1.WidgetRenderState.hidden, timeout: 200, in: renderState === widget_core_1.WidgetRenderState.open, transitions: animation, unmountOnExit: renderState === widget_core_1.WidgetRenderState.closed }, function (state, css) { return (react_1.default.createElement(Wrapper, __assign({}, other, { animationCss: css, "data-state": state, ref: ref, className: (0, widget_utilities_1.appendClassNames)('humany-animated-area', className) }), children)); }));
-});
-exports.default = Area;
-var Wrapper = (0, styled_components_1.default)(widget_ui_1.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), widget_types_grid_1.genericComponentStyling, function (p) { return !!p.animationCss && p.animationCss; }, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
-    return p.hidden &&
-        p['data-state'] === 'exited' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
-});
-var templateObject_1, templateObject_2;

package/lib/area-component.d.ts

@@ -1,27 +0,0 @@
-import { Container } from '@webprovisions/platform';
-declare type Symbol = {
-    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
-    content: string;
-};
-export declare enum AreaMode {
-    Static = "static",
-    Drawer = "drawer",
-    Dropdown = "dropdown",
-    Modal = "modal"
-}
-export declare type AreaComponentProps = {
-    mode: AreaMode;
-    animation?: string;
-    fullScreen?: boolean;
-    columns?: number;
-    scrollable?: boolean;
-    header?: string;
-    trigger?: {
-        symbol?: Symbol;
-        label?: string;
-        size?: number;
-        ariaLabel?: string;
-    };
-};
-export declare const AreaComponent: (container: Container) => Promise<void>;
-export default AreaComponent;

package/lib/area-component.js

@@ -1,39 +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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AreaComponent = exports.AreaMode = void 0;
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var AreaMode;
-(function (AreaMode) {
-    AreaMode["Static"] = "static";
-    AreaMode["Drawer"] = "drawer";
-    AreaMode["Dropdown"] = "dropdown";
-    AreaMode["Modal"] = "modal";
-})(AreaMode = exports.AreaMode || (exports.AreaMode = {}));
-var AreaComponent = function (container) {
-    return (0, widget_ui_1.createReactComponent)(container, 'area', Promise.resolve().then(function () { return __importStar(require('./area')); }), function (component) { });
-};
-exports.AreaComponent = AreaComponent;
-exports.default = exports.AreaComponent;

package/lib/area.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Area: React.FC<any>;
-export default Area;

package/lib/area.js

@@ -1,148 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var widget_core_1 = require("@telia-ace/widget-core");
-var widget_types_grid_1 = require("@telia-ace/widget-types-grid");
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var widget_utilities_1 = require("@telia-ace/widget-utilities");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var animated_area_1 = __importDefault(require("./animated-area"));
-var area_component_1 = require("./area-component");
-var Area = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var name = (0, widget_ui_1.useComponentDescriptor)().name;
-    var renderState = (0, widget_ui_1.useRenderState)();
-    var context = (0, widget_ui_1.useContext)();
-    var properties = (0, widget_ui_1.useProperties)();
-    var children = (0, widget_ui_1.useChildren)();
-    var container = (0, widget_ui_1.useContainer)();
-    var _b = context.gap, gap = _b === void 0 ? '0' : _b;
-    var _c = properties.columns, columns = _c === void 0 ? 1 : _c, _d = properties.animation, animation = _d === void 0 ? 'none' : _d, _e = properties.scrollable, scrollable = _e === void 0 ? false : _e, _f = properties.mode, mode = _f === void 0 ? area_component_1.AreaMode.Static : _f, _g = properties.trigger, trigger = _g === void 0 ? {} : _g, fullScreen = properties.fullScreen, header = properties.header, areaProperties = __rest(properties, ["columns", "animation", "scrollable", "mode", "trigger", "fullScreen", "header"]);
-    var _h = trigger.size, size = _h === void 0 ? 24 : _h, symbol = trigger.symbol, label = trigger.label, ariaLabel = trigger.ariaLabel, otherTriggerProps = __rest(trigger, ["size", "symbol", "label", "ariaLabel"]);
-    var _j = __read((0, widget_ui_1.useScroll)(scrollable), 2), scrollableCss = _j[0], elem = _j[1];
-    var setRef = (0, react_1.useCallback)(function (node) {
-        var events = container.get('$widget').events;
-        events.dispatch('widget:area-rendered', {
-            name: name,
-            properties: properties,
-            element: node,
-        });
-        elem.current = node;
-        return node;
-    }, [properties, renderState]);
-    if (!children.length) {
-        return (0, widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-area') }));
-    }
-    var props = __assign(__assign(__assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-area', "humany-area-".concat(name)), scrollableCss: scrollableCss }), areaProperties), { columns: columns, gap: gap, renderState: renderState, animation: animation, hidden: renderState === widget_core_1.WidgetRenderState.hidden, ref: setRef });
-    var content = (function () {
-        if (animation !== 'none') {
-            return (react_1.default.createElement(widget_ui_1.ColumnContext.Provider, { value: columns },
-                react_1.default.createElement(animated_area_1.default, __assign({}, props), children.map(function (child) { return (react_1.default.createElement(widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })); }))));
-        }
-        if (renderState === widget_core_1.WidgetRenderState.closed) {
-            return null;
-        }
-        return (react_1.default.createElement(widget_ui_1.ColumnContext.Provider, { value: columns },
-            react_1.default.createElement(Wrapper, __assign({}, props), children.map(function (child) { return (react_1.default.createElement(widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })); }))));
-    })();
-    if (mode === area_component_1.AreaMode.Static) {
-        return content;
-    }
-    var triggerButton = (react_1.default.createElement(Trigger, __assign({ className: "humany-area-trigger", title: ariaLabel }, (0, widget_ui_1.filterCssProps)(otherTriggerProps)),
-        label && react_1.default.createElement(TriggerLabel, null, label),
-        symbol && react_1.default.createElement(TriggerSymbolBadge, { symbol: symbol, size: size })));
-    if (mode === area_component_1.AreaMode.Dropdown) {
-        return react_1.default.createElement(widget_ui_1.Dropdown, { trigger: triggerButton }, content);
-    }
-    if (mode === area_component_1.AreaMode.Drawer) {
-        var drawerAnimation = (Object.values(widget_ui_1.DrawerAnimationType).includes(animation) && {
-            type: animation,
-        }) ||
-            undefined;
-        return (react_1.default.createElement(widget_ui_1.Drawer, { header: header, animation: drawerAnimation, fullScreen: fullScreen, trigger: triggerButton }, content));
-    }
-    if (mode === area_component_1.AreaMode.Modal) {
-        widget_utilities_1.Logger.warn('modal area not implemented');
-        return null;
-    }
-    return null;
-};
-exports.default = Area;
-var Trigger = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"], ["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"])), widget_ui_1.filterCssPropsStyle, function (p) {
-    return p.theme.fonts &&
-        "\n    font-family: ".concat(p.theme.fonts.type, ";\n    font-size: ").concat(p.theme.fonts.normal, ";\n  ");
-}, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.paddedBorderTabStyle; });
-var TriggerLabel = (0, styled_components_1.default)(widget_ui_1.Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"], ["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var TriggerSymbolBadge = (0, styled_components_1.default)(widget_ui_1.SymbolBadge)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    path {\n        fill: ", ";\n    }\n"], ["\n    path {\n        fill: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var Wrapper = (0, styled_components_1.default)(widget_ui_1.Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), widget_types_grid_1.genericComponentStyling, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
-    return p.hidden && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-import AreaComponent from './area-component';
-export default AreaComponent;

package/lib/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var area_component_1 = __importDefault(require("./area-component"));
-exports.default = area_component_1.default;

package/lib-esm/animated-area.js

@@ -1,45 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { WidgetRenderState } from '@telia-ace/widget-core';
-import { genericComponentStyling } from '@telia-ace/widget-types-grid';
-import { Grid, TransitionComponent } from '@telia-ace/widget-ui';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-var Area = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, renderState = _a.renderState, animation = _a.animation, other = __rest(_a, ["children", "className", "renderState", "animation"]);
-    if (!renderState) {
-        return null;
-    }
-    return (React.createElement(TransitionComponent, { mountOnEnter: renderState !== WidgetRenderState.hidden, timeout: 200, in: renderState === WidgetRenderState.open, transitions: animation, unmountOnExit: renderState === WidgetRenderState.closed }, function (state, css) { return (React.createElement(Wrapper, __assign({}, other, { animationCss: css, "data-state": state, ref: ref, className: appendClassNames('humany-animated-area', className) }), children)); }));
-});
-export default Area;
-var Wrapper = styled(Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), genericComponentStyling, function (p) { return !!p.animationCss && p.animationCss; }, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
-    return p.hidden &&
-        p['data-state'] === 'exited' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
-});
-var templateObject_1, templateObject_2;

package/lib-esm/area-component.js

@@ -1,12 +0,0 @@
-import { createReactComponent } from '@telia-ace/widget-ui';
-export var AreaMode;
-(function (AreaMode) {
-    AreaMode["Static"] = "static";
-    AreaMode["Drawer"] = "drawer";
-    AreaMode["Dropdown"] = "dropdown";
-    AreaMode["Modal"] = "modal";
-})(AreaMode || (AreaMode = {}));
-export var AreaComponent = function (container) {
-    return createReactComponent(container, 'area', import('./area'), function (component) { });
-};
-export default AreaComponent;

package/lib-esm/area.js

@@ -1,120 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { WidgetRenderState } from '@telia-ace/widget-core';
-import { Component, genericComponentStyling } from '@telia-ace/widget-types-grid';
-import { Button, ColumnContext, createEmptyComponent, Drawer, DrawerAnimationType, Dropdown, filterCssProps, filterCssPropsStyle, Grid, paddedBorderTabStyle, SymbolBadge, Text, useChildren, useComponentDescriptor, useContainer, useContext, useProperties, useRenderState, useScroll, } from '@telia-ace/widget-ui';
-import { appendClassNames, Logger } from '@telia-ace/widget-utilities';
-import React, { useCallback } from 'react';
-import styled, { css } from 'styled-components';
-import AnimatedArea from './animated-area';
-import { AreaMode } from './area-component';
-var Area = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var name = useComponentDescriptor().name;
-    var renderState = useRenderState();
-    var context = useContext();
-    var properties = useProperties();
-    var children = useChildren();
-    var container = useContainer();
-    var _b = context.gap, gap = _b === void 0 ? '0' : _b;
-    var _c = properties.columns, columns = _c === void 0 ? 1 : _c, _d = properties.animation, animation = _d === void 0 ? 'none' : _d, _e = properties.scrollable, scrollable = _e === void 0 ? false : _e, _f = properties.mode, mode = _f === void 0 ? AreaMode.Static : _f, _g = properties.trigger, trigger = _g === void 0 ? {} : _g, fullScreen = properties.fullScreen, header = properties.header, areaProperties = __rest(properties, ["columns", "animation", "scrollable", "mode", "trigger", "fullScreen", "header"]);
-    var _h = trigger.size, size = _h === void 0 ? 24 : _h, symbol = trigger.symbol, label = trigger.label, ariaLabel = trigger.ariaLabel, otherTriggerProps = __rest(trigger, ["size", "symbol", "label", "ariaLabel"]);
-    var _j = __read(useScroll(scrollable), 2), scrollableCss = _j[0], elem = _j[1];
-    var setRef = useCallback(function (node) {
-        var events = container.get('$widget').events;
-        events.dispatch('widget:area-rendered', {
-            name: name,
-            properties: properties,
-            element: node,
-        });
-        elem.current = node;
-        return node;
-    }, [properties, renderState]);
-    if (!children.length) {
-        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-area') }));
-    }
-    var props = __assign(__assign(__assign(__assign({}, other), { className: appendClassNames(className, 'humany-area', "humany-area-".concat(name)), scrollableCss: scrollableCss }), areaProperties), { columns: columns, gap: gap, renderState: renderState, animation: animation, hidden: renderState === WidgetRenderState.hidden, ref: setRef });
-    var content = (function () {
-        if (animation !== 'none') {
-            return (React.createElement(ColumnContext.Provider, { value: columns },
-                React.createElement(AnimatedArea, __assign({}, props), children.map(function (child) { return (React.createElement(Component, { key: child.id, id: child.id, branch: "default" })); }))));
-        }
-        if (renderState === WidgetRenderState.closed) {
-            return null;
-        }
-        return (React.createElement(ColumnContext.Provider, { value: columns },
-            React.createElement(Wrapper, __assign({}, props), children.map(function (child) { return (React.createElement(Component, { key: child.id, id: child.id, branch: "default" })); }))));
-    })();
-    if (mode === AreaMode.Static) {
-        return content;
-    }
-    var triggerButton = (React.createElement(Trigger, __assign({ className: "humany-area-trigger", title: ariaLabel }, filterCssProps(otherTriggerProps)),
-        label && React.createElement(TriggerLabel, null, label),
-        symbol && React.createElement(TriggerSymbolBadge, { symbol: symbol, size: size })));
-    if (mode === AreaMode.Dropdown) {
-        return React.createElement(Dropdown, { trigger: triggerButton }, content);
-    }
-    if (mode === AreaMode.Drawer) {
-        var drawerAnimation = (Object.values(DrawerAnimationType).includes(animation) && {
-            type: animation,
-        }) ||
-            undefined;
-        return (React.createElement(Drawer, { header: header, animation: drawerAnimation, fullScreen: fullScreen, trigger: triggerButton }, content));
-    }
-    if (mode === AreaMode.Modal) {
-        Logger.warn('modal area not implemented');
-        return null;
-    }
-    return null;
-};
-export default Area;
-var Trigger = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"], ["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"])), filterCssPropsStyle, function (p) {
-    return p.theme.fonts &&
-        "\n    font-family: ".concat(p.theme.fonts.type, ";\n    font-size: ").concat(p.theme.fonts.normal, ";\n  ");
-}, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && paddedBorderTabStyle; });
-var TriggerLabel = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"], ["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var TriggerSymbolBadge = styled(SymbolBadge)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    path {\n        fill: ", ";\n    }\n"], ["\n    path {\n        fill: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var Wrapper = styled(Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), genericComponentStyling, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
-    return p.hidden && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib-esm/index.js

@@ -1,2 +0,0 @@
-import AreaComponent from './area-component';
-export default AreaComponent;