@apia/components 2.0.9 → 2.0.11

package/dist/components/apia/ApiaFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiaFilter.js","sources":["../../../src/components/apia/ApiaFilter.tsx"],"sourcesContent":["import { TApiaFilter, TApiaFilterValue } from '@apia/util';\r\nimport { ForwardedRef } from 'react';\r\nimport * as React from 'react';\r\nimport { Input, Select } from '@apia/theme';\r\nimport { getVariant } from '@apia/theme';\r\nimport {\r\n  TNumberInputChangeEvent,\r\n  NumberInput,\r\n  getFieldErrorStyles,\r\n} from '../forms';\r\nimport { ApiaDateFilter } from './ApiaDateFilter';\r\n\r\nexport interface IApiaFilter {\r\n  filter: TApiaFilter;\r\n  onBlur?: (ev: TApiaFilterValue) => void;\r\n  onChange?: (\r\n    ev: TApiaFilterValue,\r\n  ) => void | boolean | string | Promise<boolean | string>;\r\n  onPressEnter?: (ev: TApiaFilterValue) => void;\r\n}\r\n\r\nconst NoMemoApiaFilter = (\r\n  { filter, onChange, onBlur, onPressEnter }: IApiaFilter,\r\n  ref: React.Ref<HTMLInputElement | HTMLSelectElement>,\r\n) => {\r\n  const [value, setValue] = React.useState<TApiaFilterValue>(\r\n    filter.currentValue ?? '',\r\n  );\r\n\r\n  const handleClick = React.useCallback((ev: React.MouseEvent) => {\r\n    ev.stopPropagation();\r\n  }, []);\r\n\r\n  const [lastEmittedValue, setLastEmittedValue] =\r\n    React.useState<TApiaFilterValue>(filter.currentValue);\r\n\r\n  const filterCurrentValue = filter?.currentValue;\r\n  React.useEffect(() => {\r\n    if (filterCurrentValue === '') {\r\n      setValue(String(filterCurrentValue));\r\n      setLastEmittedValue(String(filterCurrentValue));\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [filter?.deleteFiltersTimestamp]);\r\n\r\n  if (filter) {\r\n    const handleChange = (\r\n      ev: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,\r\n    ) => {\r\n      if (\r\n        (onChange && onChange(String(ev.target.value)) !== false) ||\r\n        !onChange\r\n      )\r\n        setValue(String(ev.target.value));\r\n    };\r\n    const handleNumberChange = (ev: TNumberInputChangeEvent) => {\r\n      if ((onChange && onChange(String(ev.value)) !== false) || !onChange)\r\n        setValue(String(ev.value));\r\n    };\r\n    const handleBlur = (\r\n      ev:\r\n        | React.ChangeEvent<HTMLInputElement | HTMLSelectElement>\r\n        | React.KeyboardEvent,\r\n    ) => {\r\n      if (onBlur && lastEmittedValue !== value) {\r\n        setLastEmittedValue(value);\r\n        onBlur((ev.target as HTMLInputElement).value);\r\n      }\r\n    };\r\n\r\n    const sortedOptions = filter.sortCombo\r\n      ? [...(filter.options ?? [])].sort((a, b) => (a.label > b.label ? 1 : -1))\r\n      : filter.options;\r\n    const options = sortedOptions?.map((option) => {\r\n      return (\r\n        <option value={option.value} key={option.value ?? option.label ?? ' '}>\r\n          {option.label}\r\n        </option>\r\n      );\r\n    });\r\n\r\n    if (filter.type === 'date' || filter.type === 'D')\r\n      return (\r\n        <ApiaDateFilter\r\n          filter={filter}\r\n          onChange={onChange}\r\n          onBlur={onBlur}\r\n          onPressEnter={onPressEnter}\r\n          ref={ref}\r\n        />\r\n      );\r\n\r\n    if (filter.type === 'apiaNumber') {\r\n      return (\r\n        <NumberInput\r\n          aria-readonly={filter.readonly}\r\n          readOnly={filter.readonly}\r\n          value={value as string}\r\n          placeholder={filter.placeholder}\r\n          onChange={handleNumberChange}\r\n          onKeyDown={(ev) => {\r\n            if (ev.key.toLowerCase() === 'enter') {\r\n              handleBlur(ev);\r\n              if (onPressEnter)\r\n                onPressEnter((ev.target as HTMLInputElement).value);\r\n            }\r\n          }}\r\n          onClick={handleClick}\r\n          {...getVariant('input')}\r\n          className={`filter ${filter.error ? 'requiredFilter__Border' : ''}`}\r\n          title={filter.title ?? filter.toolTip ?? String(filter.id)}\r\n          ref={ref as ForwardedRef<HTMLInputElement>}\r\n          aria-label={filter.title ?? filter.toolTip ?? String(filter.id)}\r\n          name={filter.id as string}\r\n        />\r\n      );\r\n    }\r\n\r\n    return filter.options ? (\r\n      <Select\r\n        aria-readonly={filter.readonly}\r\n        disabled={filter.readonly}\r\n        onChange={handleChange}\r\n        onBlur={handleBlur}\r\n        value={value}\r\n        className={`\"filter\" ${filter.error ? 'requiredFilter__Border' : ''}`}\r\n        title={filter.title ?? filter.toolTip ?? String(filter.id)}\r\n        ref={ref as ForwardedRef<HTMLSelectElement>}\r\n        aria-label={filter.title ?? filter.toolTip ?? String(filter.id)}\r\n        onClick={handleClick}\r\n        sx={getFieldErrorStyles(!filter.error)}\r\n        name={filter.id as string}\r\n      >\r\n        {options}\r\n      </Select>\r\n    ) : (\r\n      <Input\r\n        aria-readonly={filter.readonly}\r\n        readOnly={filter.readonly}\r\n        value={value}\r\n        type={(filter.type === 'N' ? 'number' : filter.type) ?? 'text'}\r\n        placeholder={filter.placeholder}\r\n        onChange={handleChange}\r\n        onBlur={handleBlur}\r\n        onKeyDown={(ev) => {\r\n          if (ev.key.toLowerCase() === 'enter') {\r\n            handleBlur(ev);\r\n            if (onPressEnter)\r\n              onPressEnter((ev.target as HTMLInputElement).value);\r\n          }\r\n        }}\r\n        onClick={handleClick}\r\n        {...getVariant('input')}\r\n        className={`filter ${filter.error ? 'requiredFilter__Border' : ''}`}\r\n        title={filter.title ?? filter.toolTip ?? String(filter.id)}\r\n        ref={ref as ForwardedRef<HTMLInputElement>}\r\n        aria-label={filter.title ?? filter.toolTip ?? String(filter.id)}\r\n        name={filter.id as string}\r\n      />\r\n    );\r\n  }\r\n  return null;\r\n};\r\n\r\nexport const ApiaFilter = React.memo(React.forwardRef(NoMemoApiaFilter));\r\n"],"names":[],"mappings":"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"}

package/dist/components/buttons/useOtherTagButton.d.ts

@@ -0,0 +1,28 @@
+import React__default from 'react';
+
+/**
+ * Este hook está pensado para crear un botón utilizando un tag cualquiera.
+ *
+ * @example
+ *
+ * const buttonProps = useOtherTagButton(React.useMemo(()=>({
+ *   onClick(ev) { console.log(ev.target) },
+ *   onKeyDown(ev) { console.log(ev.code) }
+ * }),[])
+ *
+ * return <div {...buttonProps}>Esto es un botón</div>
+ */
+declare function useOtherTagButton(props?: Partial<{
+    className?: string;
+    onClick: React__default.MouseEventHandler;
+    onKeyDown: React__default.KeyboardEventHandler;
+}>): {
+    className: string;
+    onClick: (ev: React__default.MouseEvent) => void;
+    onKeyDown: (ev: React__default.KeyboardEvent) => void;
+    role: string;
+    tabIndex: number;
+};
+
+export { useOtherTagButton };
+//# sourceMappingURL=useOtherTagButton.d.ts.map

package/dist/components/buttons/useOtherTagButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOtherTagButton.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/buttons/useOtherTagButton.js

@@ -0,0 +1,38 @@
+import { getSpecificParent } from '@apia/util';
+import uniqueId from 'lodash-es/uniqueId';
+import React__default from 'react';
+
+function useOtherTagButton(props) {
+  const specificClass = React__default.useMemo(() => `otherTag${uniqueId()}`, []);
+  const actualOnClick = React__default.useCallback(
+    (ev) => {
+      props?.onClick?.(ev);
+    },
+    [props]
+  );
+  const actualOnKeyDown = React__default.useCallback(
+    (ev) => {
+      props?.onKeyDown?.(ev);
+      if (ev.code === "Enter" || ev.code === "Space") {
+        ev.preventDefault();
+        const button = getSpecificParent(
+          ev.target,
+          (current) => current.classList.contains(specificClass)
+        );
+        if (button)
+          button.click();
+      }
+    },
+    [props, specificClass]
+  );
+  return {
+    className: `${specificClass} ${props?.className ?? ""}`,
+    onClick: actualOnClick,
+    onKeyDown: actualOnKeyDown,
+    role: "button",
+    tabIndex: 0
+  };
+}
+
+export { useOtherTagButton };
+//# sourceMappingURL=useOtherTagButton.js.map

package/dist/components/buttons/useOtherTagButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOtherTagButton.js","sources":["../../../src/components/buttons/useOtherTagButton.ts"],"sourcesContent":["import { getSpecificParent } from '@apia/util';\r\nimport uniqueId from 'lodash-es/uniqueId';\r\nimport React from 'react';\r\n\r\n/**\r\n * Este hook está pensado para crear un botón utilizando un tag cualquiera.\r\n *\r\n * @example\r\n *\r\n * const buttonProps = useOtherTagButton(React.useMemo(()=>({\r\n *   onClick(ev) { console.log(ev.target) },\r\n *   onKeyDown(ev) { console.log(ev.code) }\r\n * }),[])\r\n *\r\n * return <div {...buttonProps}>Esto es un botón</div>\r\n */\r\nexport function useOtherTagButton(\r\n  props?: Partial<{\r\n    className?: string;\r\n    onClick: React.MouseEventHandler;\r\n    onKeyDown: React.KeyboardEventHandler;\r\n  }>,\r\n) {\r\n  const specificClass = React.useMemo(() => `otherTag${uniqueId()}`, []);\r\n\r\n  const actualOnClick = React.useCallback(\r\n    (ev: React.MouseEvent) => {\r\n      props?.onClick?.(ev);\r\n    },\r\n    [props],\r\n  );\r\n  const actualOnKeyDown = React.useCallback(\r\n    (ev: React.KeyboardEvent) => {\r\n      props?.onKeyDown?.(ev);\r\n      if (ev.code === 'Enter' || ev.code === 'Space') {\r\n        ev.preventDefault();\r\n        const button = getSpecificParent(ev.target as HTMLElement, (current) =>\r\n          current.classList.contains(specificClass),\r\n        );\r\n        if (button) button.click();\r\n      }\r\n    },\r\n    [props, specificClass],\r\n  );\r\n\r\n  return {\r\n    className: `${specificClass} ${props?.className ?? ''}`,\r\n    onClick: actualOnClick,\r\n    onKeyDown: actualOnKeyDown,\r\n    role: 'button',\r\n    tabIndex: 0,\r\n  };\r\n}\r\n"],"names":["React"],"mappings":";;;;AAgBO,SAAS,kBACd,KAKA,EAAA;AACA,EAAM,MAAA,aAAA,GAAgBA,eAAM,OAAQ,CAAA,MAAM,WAAW,QAAS,EAAC,CAAI,CAAA,EAAA,EAAE,CAAA,CAAA;AAErE,EAAA,MAAM,gBAAgBA,cAAM,CAAA,WAAA;AAAA,IAC1B,CAAC,EAAyB,KAAA;AACxB,MAAA,KAAA,EAAO,UAAU,EAAE,CAAA,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAA,MAAM,kBAAkBA,cAAM,CAAA,WAAA;AAAA,IAC5B,CAAC,EAA4B,KAAA;AAC3B,MAAA,KAAA,EAAO,YAAY,EAAE,CAAA,CAAA;AACrB,MAAA,IAAI,EAAG,CAAA,IAAA,KAAS,OAAW,IAAA,EAAA,CAAG,SAAS,OAAS,EAAA;AAC9C,QAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,QAAA,MAAM,MAAS,GAAA,iBAAA;AAAA,UAAkB,EAAG,CAAA,MAAA;AAAA,UAAuB,CAAC,OAAA,KAC1D,OAAQ,CAAA,SAAA,CAAU,SAAS,aAAa,CAAA;AAAA,SAC1C,CAAA;AACA,QAAI,IAAA,MAAA;AAAQ,UAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,IACA,CAAC,OAAO,aAAa,CAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAW,CAAG,EAAA,aAAa,CAAI,CAAA,EAAA,KAAA,EAAO,aAAa,EAAE,CAAA,CAAA;AAAA,IACrD,OAAS,EAAA,aAAA;AAAA,IACT,SAAW,EAAA,eAAA;AAAA,IACX,IAAM,EAAA,QAAA;AAAA,IACN,QAAU,EAAA,CAAA;AAAA,GACZ,CAAA;AACF;;;;"}

package/dist/components/collapsiblePanel/index.d.ts

@@ -0,0 +1,7 @@
+import React__default from 'react';
+import { ICollapsiblePanel } from './types.js';
+
+declare const CollapsiblePanel: React__default.ForwardRefExoticComponent<ICollapsiblePanel & React__default.RefAttributes<HTMLDivElement>>;
+
+export { CollapsiblePanel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsiblePanel/index.d.ts.map

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

package/dist/components/collapsiblePanel/index.js

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import React__default from 'react';
+import { injectStyles, Box, getVariant, Button } from '@apia/theme';
+import uniqueId from 'lodash-es/uniqueId';
+import isFunction from 'lodash-es/isFunction';
+import { persistentStorage, useUpdateEffect, disableChildrenFocus, enableChildrenFocus, customEvents } from '@apia/util';
+import AnimateHeight from 'react-animate-height';
+import { styles } from './styles.js';
+import { Icon } from '@apia/icons';
+
+injectStyles("layout.common.components.collapsiblePanel", styles);
+const CollapsiblePanel = React__default.forwardRef(
+  ({
+    children,
+    className,
+    closedIcon = "ArrowDownThin",
+    collapsed,
+    defaultCollapsed,
+    disableChildrenFocus: disableChildrenFocus$1,
+    iconSize = "20px",
+    id,
+    onClose,
+    onOpen,
+    openIcon = "ArrowRightThin",
+    label,
+    rememberCollapsedState,
+    titleButtons,
+    minHeight = 0,
+    "aria-hidden": ariaHidden
+  }, outerRef) => {
+    const prefix = React__default.useMemo(() => id ? "" : uniqueId(), []);
+    const actualId = `${prefix}_${id ?? "collapsiblePanel"}`;
+    const [isCollapsed, setIsCollapsed] = React__default.useState(
+      rememberCollapsedState ? persistentStorage[`collapsiblePanel${actualId}`] ?? defaultCollapsed ?? collapsed : defaultCollapsed ?? collapsed ?? persistentStorage[`collapsiblePanel${actualId}`]
+    );
+    const [ref, setRef] = React__default.useState(null);
+    const callOnOpen = React__default.useCallback(
+      (updateState, ev) => {
+        const onOpenResult = onOpen ? onOpen(ev) : null;
+        if (onOpenResult) {
+          void onOpenResult.then((result) => {
+            if (result) {
+              if (updateState)
+                setIsCollapsed((current) => !current);
+            }
+          });
+        } else if (updateState)
+          setIsCollapsed((current) => !current);
+      },
+      [onOpen]
+    );
+    useUpdateEffect(() => {
+      if (collapsed !== void 0)
+        setIsCollapsed(collapsed);
+      if (collapsed === false)
+        callOnOpen(false);
+    }, [collapsed]);
+    useUpdateEffect(() => {
+      if (isCollapsed) {
+        if (onClose)
+          onClose();
+        persistentStorage[`collapsiblePanel${actualId}`] = true;
+        if (ref && disableChildrenFocus$1)
+          disableChildrenFocus(
+            ref.querySelector(".collapsiblePanel__content")
+          );
+      } else {
+        persistentStorage[`collapsiblePanel${actualId}`] = false;
+        if (ref && disableChildrenFocus$1)
+          enableChildrenFocus(
+            ref.querySelector(".collapsiblePanel__content")
+          );
+      }
+    }, [isCollapsed]);
+    React__default.useEffect(() => {
+      const handleCustomFocus = () => setIsCollapsed(false);
+      ref?.querySelector(".collapsiblePanel__content")?.addEventListener(customEvents.focus, handleCustomFocus);
+      return () => {
+        ref?.querySelector(".collapsiblePanel__content")?.removeEventListener(customEvents.focus, handleCustomFocus);
+      };
+    }, [id, isCollapsed, onClose, onOpen, ref]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: `collapsiblePanel ${className ?? ""}`,
+        ...getVariant("layout.common.components.collapsiblePanel"),
+        ref: (el) => {
+          if (isFunction(outerRef))
+            outerRef(el);
+          setRef(el);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "collapsiblePanel__label", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                ...getVariant("inherit"),
+                "aria-expanded": !isCollapsed,
+                onClick: (ev) => callOnOpen(true, ev),
+                type: "button",
+                className: "collapsiblePanel__label__button",
+                children: [
+                  isCollapsed ? /* @__PURE__ */ jsx(Icon, { title: "", icon: openIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon, { title: "", icon: closedIcon, size: iconSize }),
+                  /* @__PURE__ */ jsx("span", { className: "title", children: label })
+                ]
+              }
+            ),
+            titleButtons
+          ] }),
+          /* @__PURE__ */ jsx(
+            AnimateHeight,
+            {
+              id: actualId,
+              duration: 150,
+              height: isCollapsed ? minHeight : "auto",
+              sx: { "&>div": { display: "block " } },
+              "aria-hidden": ariaHidden ?? isCollapsed,
+              className: "collapsiblePanel__content",
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CollapsiblePanel.displayName = "CollapsiblePanel";
+
+export { CollapsiblePanel };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/collapsiblePanel/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box, Button } from '@apia/theme';\r\nimport uniqueId from 'lodash-es/uniqueId';\r\nimport isFunction from 'lodash-es/isFunction';\r\nimport {\r\n  customEvents,\r\n  persistentStorage,\r\n  enableChildrenFocus,\r\n  disableChildrenFocus as disableChildrenFocusMethod,\r\n  useUpdateEffect,\r\n} from '@apia/util';\r\nimport { getVariant, injectStyles } from '@apia/theme';\r\nimport AnimateHeight from 'react-animate-height';\r\nimport { styles } from './styles';\r\nimport { ICollapsiblePanel } from './types';\r\nimport { Icon } from '@apia/icons';\r\n\r\ninjectStyles('layout.common.components.collapsiblePanel', styles);\r\n\r\nexport const CollapsiblePanel = React.forwardRef<\r\n  HTMLDivElement,\r\n  ICollapsiblePanel\r\n>(\r\n  (\r\n    {\r\n      children,\r\n      className,\r\n      closedIcon = 'ArrowDownThin',\r\n      collapsed,\r\n      defaultCollapsed,\r\n      disableChildrenFocus,\r\n      iconSize = '20px',\r\n      id,\r\n      onClose,\r\n      onOpen,\r\n      openIcon = 'ArrowRightThin',\r\n      label,\r\n      rememberCollapsedState,\r\n      titleButtons,\r\n      minHeight = 0,\r\n      'aria-hidden': ariaHidden,\r\n    },\r\n    outerRef,\r\n  ) => {\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    const prefix = React.useMemo(() => (id ? '' : uniqueId()), []);\r\n    const actualId = `${prefix}_${id ?? 'collapsiblePanel'}`;\r\n\r\n    const [isCollapsed, setIsCollapsed] = React.useState<boolean>(\r\n      rememberCollapsedState\r\n        ? ((persistentStorage[`collapsiblePanel${actualId}`] ??\r\n            defaultCollapsed ??\r\n            collapsed) as boolean)\r\n        : defaultCollapsed ??\r\n            collapsed ??\r\n            (persistentStorage[`collapsiblePanel${actualId}`] as boolean),\r\n    );\r\n\r\n    const [ref, setRef] = React.useState<HTMLDivElement | null>(null);\r\n\r\n    const callOnOpen = React.useCallback(\r\n      (updateState: unknown, ev?: React.MouseEvent) => {\r\n        const onOpenResult = onOpen ? onOpen(ev) : null;\r\n        if (onOpenResult) {\r\n          void onOpenResult.then((result) => {\r\n            if (result) if (updateState) setIsCollapsed((current) => !current);\r\n          });\r\n        } else if (updateState) setIsCollapsed((current) => !current);\r\n      },\r\n      [onOpen],\r\n    );\r\n\r\n    useUpdateEffect(() => {\r\n      if (collapsed !== undefined) setIsCollapsed(collapsed);\r\n      if (collapsed === false) callOnOpen(false);\r\n    }, [collapsed]);\r\n\r\n    useUpdateEffect(() => {\r\n      if (isCollapsed) {\r\n        if (onClose) onClose();\r\n        persistentStorage[`collapsiblePanel${actualId}`] = true;\r\n        if (ref && disableChildrenFocus)\r\n          disableChildrenFocusMethod(\r\n            ref.querySelector('.collapsiblePanel__content') as HTMLElement,\r\n          );\r\n      } else {\r\n        persistentStorage[`collapsiblePanel${actualId}`] = false;\r\n        if (ref && disableChildrenFocus)\r\n          enableChildrenFocus(\r\n            ref.querySelector('.collapsiblePanel__content') as HTMLElement,\r\n          );\r\n      }\r\n    }, [isCollapsed]);\r\n\r\n    React.useEffect(() => {\r\n      const handleCustomFocus = () => setIsCollapsed(false);\r\n      ref\r\n        ?.querySelector('.collapsiblePanel__content')\r\n        ?.addEventListener(customEvents.focus, handleCustomFocus);\r\n      return () => {\r\n        ref\r\n          ?.querySelector('.collapsiblePanel__content')\r\n          ?.removeEventListener(customEvents.focus, handleCustomFocus);\r\n      };\r\n    }, [id, isCollapsed, onClose, onOpen, ref]);\r\n\r\n    return (\r\n      <Box\r\n        className={`collapsiblePanel ${className ?? ''}`}\r\n        {...getVariant('layout.common.components.collapsiblePanel')}\r\n        ref={(el: HTMLDivElement) => {\r\n          if (isFunction(outerRef)) outerRef(el);\r\n          setRef(el);\r\n        }}\r\n      >\r\n        <Box className=\"collapsiblePanel__label\">\r\n          <Button\r\n            {...getVariant('inherit')}\r\n            aria-expanded={!isCollapsed}\r\n            onClick={(ev) => callOnOpen(true, ev)}\r\n            type=\"button\"\r\n            className=\"collapsiblePanel__label__button\"\r\n          >\r\n            {isCollapsed ? (\r\n              <Icon title=\"\" icon={openIcon} size={iconSize} />\r\n            ) : (\r\n              <Icon title=\"\" icon={closedIcon} size={iconSize} />\r\n            )}\r\n            <span className=\"title\">{label}</span>\r\n          </Button>\r\n          {titleButtons}\r\n        </Box>\r\n        <AnimateHeight\r\n          id={actualId}\r\n          duration={150}\r\n          height={isCollapsed ? minHeight : 'auto'}\r\n          sx={{ '&>div': { display: 'block ' } }}\r\n          aria-hidden={ariaHidden ?? isCollapsed}\r\n          className=\"collapsiblePanel__content\"\r\n        >\r\n          {children}\r\n        </AnimateHeight>\r\n      </Box>\r\n    );\r\n  },\r\n);\r\n\r\nCollapsiblePanel.displayName = 'CollapsiblePanel';\r\n"],"names":["React","disableChildrenFocus","disableChildrenFocusMethod"],"mappings":"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"}

package/dist/components/collapsiblePanel/styles.js

@@ -0,0 +1,4 @@
+const styles = {};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/components/collapsiblePanel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/collapsiblePanel/styles.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\r\n\r\nexport const styles: ThemeUICSSObject = {};\r\n"],"names":[],"mappings":"AAEO,MAAM,SAA2B;;;;"}

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

@@ -0,0 +1,23 @@
+import { TIconType, TIconName } from '@apia/icons';
+
+interface ICollapsiblePanel {
+    'aria-hidden'?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    closedIcon?: TIconType | TIconName;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    disableChildrenFocus?: boolean;
+    iconSize?: string | number;
+    id?: string;
+    minHeight?: number;
+    onClose?: () => unknown;
+    onOpen?: (ev?: React.MouseEvent) => void | Promise<boolean>;
+    openIcon?: TIconType | TIconName;
+    label: React.ReactNode;
+    rememberCollapsedState?: boolean;
+    titleButtons?: React.ReactNode;
+}
+
+export type { ICollapsiblePanel };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/dialogs/AlertModal.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+
+interface IAlert {
+    children: React.ReactNode;
+    onClose: () => void;
+    title?: string;
+}
+declare const AlertModal: ({ children, onClose, title }: IAlert) => React$1.JSX.Element;
+
+export { AlertModal, type IAlert };
+//# sourceMappingURL=AlertModal.d.ts.map

package/dist/components/dialogs/AlertModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/dialogs/AlertModal.js

@@ -0,0 +1,42 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { Modal } from '../modals/Modal.js';
+import { Confirm } from '../modals/layout/Confirm.js';
+import { useModal } from '../modals/hooks/useModal.js';
+
+const AlertModal = ({ children, onClose, title }) => {
+  const { hide, ...modalProps } = useModal({
+    isDefaultOpen: true,
+    onExited: onClose
+  });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ...modalProps,
+      sx: useMemo(
+        () => ({
+          ".modal__content .confirm__content": {
+            overflow: "visible"
+          }
+        }),
+        []
+      ),
+      initialFocusGetter: useCallback((ref) => {
+        return ref?.querySelector(".confirm__confirmButton");
+      }, []),
+      title,
+      children: /* @__PURE__ */ jsx(
+        Confirm,
+        {
+          onConfirm: useCallback(() => {
+            hide();
+          }, [hide]),
+          children
+        }
+      )
+    }
+  );
+};
+
+export { AlertModal };
+//# sourceMappingURL=AlertModal.js.map

package/dist/components/dialogs/AlertModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.js","sources":["../../../src/components/dialogs/AlertModal.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\r\nimport { Confirm, Modal, useModal } from '../modals';\r\n\r\nexport interface IAlert {\r\n  children: React.ReactNode;\r\n  onClose: () => void;\r\n  title?: string;\r\n}\r\n\r\nexport const AlertModal = ({ children, onClose, title }: IAlert) => {\r\n  const { hide, ...modalProps } = useModal({\r\n    isDefaultOpen: true,\r\n    onExited: onClose,\r\n  });\r\n\r\n  return (\r\n    <Modal\r\n      {...modalProps}\r\n      sx={useMemo(\r\n        () => ({\r\n          '.modal__content .confirm__content': {\r\n            overflow: 'visible',\r\n          },\r\n        }),\r\n        [],\r\n      )}\r\n      initialFocusGetter={useCallback((ref: HTMLElement) => {\r\n        return ref?.querySelector('.confirm__confirmButton') as HTMLElement;\r\n      }, [])}\r\n      title={title}\r\n    >\r\n      <Confirm\r\n        onConfirm={useCallback(() => {\r\n          hide();\r\n        }, [hide])}\r\n      >\r\n        {children}\r\n      </Confirm>\r\n    </Modal>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;AASO,MAAM,aAAa,CAAC,EAAE,QAAU,EAAA,OAAA,EAAS,OAAoB,KAAA;AAClE,EAAA,MAAM,EAAE,IAAA,EAAM,GAAG,UAAA,KAAe,QAAS,CAAA;AAAA,IACvC,aAAe,EAAA,IAAA;AAAA,IACf,QAAU,EAAA,OAAA;AAAA,GACX,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,EAAI,EAAA,OAAA;AAAA,QACF,OAAO;AAAA,UACL,mCAAqC,EAAA;AAAA,YACnC,QAAU,EAAA,SAAA;AAAA,WACZ;AAAA,SACF,CAAA;AAAA,QACA,EAAC;AAAA,OACH;AAAA,MACA,kBAAA,EAAoB,WAAY,CAAA,CAAC,GAAqB,KAAA;AACpD,QAAO,OAAA,GAAA,EAAK,cAAc,yBAAyB,CAAA,CAAA;AAAA,OACrD,EAAG,EAAE,CAAA;AAAA,MACL,KAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,YAAY,MAAM;AAC3B,YAAK,IAAA,EAAA,CAAA;AAAA,WACP,EAAG,CAAC,IAAI,CAAC,CAAA;AAAA,UAER,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/dialogs/ConfirmModal.d.ts

@@ -0,0 +1,25 @@
+import { TApiaButtonType } from '../types.js';
+import { ReactNode, Ref } from 'react';
+
+interface IConfirm {
+    additionalButtons?: ReactNode;
+    additionalButtonsOnRight?: ReactNode;
+    cancelButtonText?: string;
+    children: ReactNode;
+    className?: string;
+    confirmButtonText?: string;
+    confirmButtonVariant?: TApiaButtonType;
+    contentRef?: Ref<HTMLDivElement>;
+    disabled?: boolean;
+    hideCancelButton?: boolean;
+    hideConfirmButton?: boolean;
+    isLoading?: boolean;
+    onConfirm?: () => unknown;
+    onCancel?: () => unknown;
+    title?: string;
+    variant?: string;
+}
+declare const ConfirmModal: ({ onConfirm, onCancel, title, ...props }: IConfirm) => JSX.Element;
+
+export { ConfirmModal, type IConfirm };
+//# sourceMappingURL=ConfirmModal.d.ts.map

package/dist/components/dialogs/ConfirmModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/dialogs/ConfirmModal.js

@@ -0,0 +1,45 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { Confirm } from '../modals/layout/Confirm.js';
+import { useModal } from '../modals/hooks/useModal.js';
+import { Modal } from '../modals/Modal.js';
+
+const ConfirmModal = ({
+  onConfirm,
+  onCancel,
+  title,
+  ...props
+}) => {
+  const hasConfirmed = useRef(false);
+  const { hide, ...modalProps } = useModal({
+    isDefaultOpen: true,
+    onExited: () => {
+      if (hasConfirmed.current)
+        onConfirm?.();
+      else
+        onCancel?.();
+    }
+  });
+  const handleCancel = useCallback(() => {
+    hide();
+  }, [hide]);
+  const handleConfirm = useCallback(() => {
+    hasConfirmed.current = true;
+    hide();
+  }, [hide]);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ...modalProps,
+      initialFocusGetter: useCallback(
+        (current) => current.querySelector(".confirm__confirmButton"),
+        []
+      ),
+      title,
+      children: /* @__PURE__ */ jsx(Confirm, { ...props, onCancel: handleCancel, onConfirm: handleConfirm })
+    }
+  );
+};
+
+export { ConfirmModal };
+//# sourceMappingURL=ConfirmModal.js.map

package/dist/components/dialogs/ConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.js","sources":["../../../src/components/dialogs/ConfirmModal.tsx"],"sourcesContent":["import { Modal, useModal } from '../modals';\r\nimport { TApiaButtonType } from '../types';\r\nimport { ReactNode, Ref, useCallback, useRef } from 'react';\r\nimport { Confirm } from '../modals/layout/Confirm';\r\n\r\nexport interface IConfirm {\r\n  additionalButtons?: ReactNode;\r\n  additionalButtonsOnRight?: ReactNode;\r\n  cancelButtonText?: string;\r\n  children: ReactNode;\r\n  className?: string;\r\n  confirmButtonText?: string;\r\n  confirmButtonVariant?: TApiaButtonType;\r\n  contentRef?: Ref<HTMLDivElement>;\r\n  disabled?: boolean;\r\n  hideCancelButton?: boolean;\r\n  hideConfirmButton?: boolean;\r\n  isLoading?: boolean;\r\n  onConfirm?: () => unknown;\r\n  onCancel?: () => unknown;\r\n  title?: string;\r\n  variant?: string;\r\n}\r\n\r\nexport const ConfirmModal = ({\r\n  onConfirm,\r\n  onCancel,\r\n  title,\r\n  ...props\r\n}: IConfirm): JSX.Element => {\r\n  const hasConfirmed = useRef(false);\r\n\r\n  const { hide, ...modalProps } = useModal({\r\n    isDefaultOpen: true,\r\n    onExited: () => {\r\n      if (hasConfirmed.current) onConfirm?.();\r\n      else onCancel?.();\r\n    },\r\n  });\r\n\r\n  const handleCancel = useCallback(() => {\r\n    hide();\r\n  }, [hide]);\r\n\r\n  const handleConfirm = useCallback(() => {\r\n    hasConfirmed.current = true;\r\n    hide();\r\n  }, [hide]);\r\n\r\n  return (\r\n    <Modal\r\n      {...modalProps}\r\n      initialFocusGetter={useCallback(\r\n        (current: HTMLElement) =>\r\n          current.querySelector<HTMLElement>('.confirm__confirmButton'),\r\n        [],\r\n      )}\r\n      title={title}\r\n    >\r\n      <Confirm {...props} onCancel={handleCancel} onConfirm={handleConfirm} />\r\n    </Modal>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA6B,KAAA;AAC3B,EAAM,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA,CAAA;AAEjC,EAAA,MAAM,EAAE,IAAA,EAAM,GAAG,UAAA,KAAe,QAAS,CAAA;AAAA,IACvC,aAAe,EAAA,IAAA;AAAA,IACf,UAAU,MAAM;AACd,MAAA,IAAI,YAAa,CAAA,OAAA;AAAS,QAAY,SAAA,IAAA,CAAA;AAAA;AACjC,QAAW,QAAA,IAAA,CAAA;AAAA,KAClB;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAK,IAAA,EAAA,CAAA;AAAA,GACP,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,YAAA,CAAa,OAAU,GAAA,IAAA,CAAA;AACvB,IAAK,IAAA,EAAA,CAAA;AAAA,GACP,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,kBAAoB,EAAA,WAAA;AAAA,QAClB,CAAC,OAAA,KACC,OAAQ,CAAA,aAAA,CAA2B,yBAAyB,CAAA;AAAA,QAC9D,EAAC;AAAA,OACH;AAAA,MACA,KAAA;AAAA,MAEA,8BAAC,OAAS,EAAA,EAAA,GAAG,OAAO,QAAU,EAAA,YAAA,EAAc,WAAW,aAAe,EAAA,CAAA;AAAA,KAAA;AAAA,GACxE,CAAA;AAEJ;;;;"}

package/dist/components/forms/Captcha.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from 'react';
+
+declare const Captcha: ({ name, imageUrl, onChange, value, className, }: {
+    name: string;
+    className?: string | undefined;
+    imageUrl: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    value: string;
+}) => React$1.JSX.Element;
+
+export { Captcha };
+//# sourceMappingURL=Captcha.d.ts.map

package/dist/components/forms/Captcha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Captcha.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/Captcha.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Flex, getVariant, Image, Input } from '@apia/theme';
+import { useState } from 'react';
+import { getLabel } from '@apia/util';
+import { IconButton } from './buttons/IconButton.js';
+
+const Captcha = ({
+  name,
+  imageUrl,
+  onChange,
+  value,
+  className
+}) => {
+  const [imgSrc, setImgSrc] = useState(`${imageUrl}?t=${Date.now()}`);
+  const handleSyncClick = () => {
+    setImgSrc(`${imageUrl}?t=${Date.now()}`);
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      sx: {
+        flexDirection: "column"
+      },
+      className: "captcha__field",
+      ...getVariant("layout.common.forms.captcha"),
+      children: [
+        /* @__PURE__ */ jsx(Flex, { className: "captcha__imageContainer", children: /* @__PURE__ */ jsx(Image, { alt: "", src: imgSrc }) }),
+        /* @__PURE__ */ jsxs(Flex, { className: `captcha__inputContainer ${className ?? ""}`, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoComplete: "off",
+              name,
+              onChange,
+              value
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { className: "captcha__buttons", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: "Refresh",
+                type: "button",
+                "aria-label": getLabel("lblCaptchaActivateAudio").text,
+                onClick: handleSyncClick
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: "Volume",
+                type: "button",
+                "aria-label": getLabel("lblCaptchaActivateAudio").text,
+                onClick: () => {
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { Captcha };
+//# sourceMappingURL=Captcha.js.map

package/dist/components/forms/Captcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Captcha.js","sources":["../../../src/components/forms/Captcha.tsx"],"sourcesContent":["import { Flex, Image, Input } from '@apia/theme';\r\nimport { useState } from 'react';\r\nimport { IconButton } from './buttons';\r\nimport { getVariant } from '@apia/theme';\r\nimport { getLabel } from '@apia/util';\r\n\r\nexport const Captcha = ({\r\n  name,\r\n  imageUrl,\r\n  onChange,\r\n  value,\r\n  className,\r\n}: {\r\n  name: string;\r\n  className?: string;\r\n  imageUrl: string;\r\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\r\n  value: string;\r\n}) => {\r\n  const [imgSrc, setImgSrc] = useState<string>(`${imageUrl}?t=${Date.now()}`);\r\n\r\n  const handleSyncClick = () => {\r\n    // IMG reload\r\n    setImgSrc(`${imageUrl}?t=${Date.now()}`);\r\n  };\r\n\r\n  return (\r\n    <Flex\r\n      sx={{\r\n        flexDirection: 'column',\r\n      }}\r\n      className=\"captcha__field\"\r\n      {...getVariant('layout.common.forms.captcha')}\r\n    >\r\n      <Flex className=\"captcha__imageContainer\">\r\n        <Image alt=\"\" src={imgSrc} />\r\n      </Flex>\r\n      <Flex className={`captcha__inputContainer ${className ?? ''}`}>\r\n        <Input\r\n          autoComplete=\"off\"\r\n          name={name}\r\n          onChange={onChange}\r\n          value={value}\r\n        />\r\n\r\n        <Flex className=\"captcha__buttons\">\r\n          <IconButton\r\n            icon=\"Refresh\"\r\n            type=\"button\"\r\n            aria-label={getLabel('lblCaptchaActivateAudio').text}\r\n            onClick={handleSyncClick}\r\n          ></IconButton>\r\n          <IconButton\r\n            icon=\"Volume\"\r\n            type=\"button\"\r\n            aria-label={getLabel('lblCaptchaActivateAudio').text}\r\n            onClick={() => {}}\r\n          ></IconButton>\r\n        </Flex>\r\n      </Flex>\r\n    </Flex>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,UAAU,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AACF,CAMM,KAAA;AACJ,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAiB,CAAG,EAAA,QAAQ,CAAM,GAAA,EAAA,IAAA,CAAK,GAAI,EAAC,CAAE,CAAA,CAAA,CAAA;AAE1E,EAAA,MAAM,kBAAkB,MAAM;AAE5B,IAAA,SAAA,CAAU,GAAG,QAAQ,CAAA,GAAA,EAAM,IAAK,CAAA,GAAA,EAAK,CAAE,CAAA,CAAA,CAAA;AAAA,GACzC,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MACA,SAAU,EAAA,gBAAA;AAAA,MACT,GAAG,WAAW,6BAA6B,CAAA;AAAA,MAE5C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,WAAU,yBACd,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAM,GAAI,EAAA,EAAA,EAAG,GAAK,EAAA,MAAA,EAAQ,CAC7B,EAAA,CAAA;AAAA,6BACC,IAAK,EAAA,EAAA,SAAA,EAAW,CAA2B,wBAAA,EAAA,SAAA,IAAa,EAAE,CACzD,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,YAAa,EAAA,KAAA;AAAA,cACb,IAAA;AAAA,cACA,QAAA;AAAA,cACA,KAAA;AAAA,aAAA;AAAA,WACF;AAAA,0BAEA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,kBACd,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,SAAA;AAAA,gBACL,IAAK,EAAA,QAAA;AAAA,gBACL,YAAA,EAAY,QAAS,CAAA,yBAAyB,CAAE,CAAA,IAAA;AAAA,gBAChD,OAAS,EAAA,eAAA;AAAA,eAAA;AAAA,aACV;AAAA,4BACD,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,QAAA;AAAA,gBACL,IAAK,EAAA,QAAA;AAAA,gBACL,YAAA,EAAY,QAAS,CAAA,yBAAyB,CAAE,CAAA,IAAA;AAAA,gBAChD,SAAS,MAAM;AAAA,iBAAC;AAAA,eAAA;AAAA,aACjB;AAAA,WACH,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/forms/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ChangeEventHandler } from 'react';
+import { ButtonProps } from '@apia/theme';
+import { TModify } from '@apia/util';
+
+type TCheckbox = TModify<ButtonProps, {
+    background?: string;
+    checked?: boolean;
+    color?: string;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    native?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
+    required?: boolean;
+    type?: string;
+}>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<TCheckbox, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type TCheckbox };
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/forms/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}