@fpkit/acss 0.5.0 → 0.5.2

package/dist/icons.d.cts

@@ -1,252 +0,0 @@
-import { a as IconProps } from './icon-e6044c73.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import 'react';
-export { I as Icon, b as IconProps, d as defaultStyles } from './icon-e6044c73.js';
-
-/**
- * Renders a code icon.
- *
- * @param {string} strokeColor - The color of the icon's stroke.
- * @param {string} fill - The color of the icon's fill.
- * @param {string} size - The size of the icon.
- * @param {string} viewBox - The viewBox of the icon.
- * @param {React.CSSProperties} styles - The default styles of the icon.
- * @param {IconProps} props - Additional props to apply to the icon.
- * @returns {JSX.Element} - A React component that renders an SVG icon.
- */
-declare const Code: {
-    ({ strokeColor, fill, size, styles, role, alt, ...props }?: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-/**
- * Renders a home icon.
- *
- * @param {string} strokeColor - The color of the icon's stroke.
- * @param {string} fill - The color of the icon's fill.
- * @param {string} size - The size of the icon.
- * @param {string} viewBox - The viewBox of the icon.
- * @param {string} name - The name of the icon.
- * @param {Object} styles - The styles of the icon.
- * @param {Object} props - The props of the icon.
- * @returns {JSX.Element} - A home icon.
- */
-declare const Home: {
-    ({ strokeColor, fill, size, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-/**
- * Add Icon component
- * @param {string} fill - Icon fill color (default: 'currentColor')
- * @param {string} size - Icon size (default: '24')
- * @param {IconProps} props - Other icon properties
- * @returns {JSX.Element} - Rendered component
- */
-declare const Add: {
-    ({ fill, size, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): JSX.Element;
-    styles: {
-        fill: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * Renders an arrow pointing to the left.
- *
- * @param {string} strokeColor - The color of the arrow's stroke.
- * @param {string} fill - The fill color of the arrow.
- * @param {string} size - The size of the arrow.
- * @param {object} styles - The styles to apply to the arrow.
- * @param {object} props - The additional props to pass to the SVG element.
- * @returns {JSX.Element} - A React component that renders an arrow pointing to the left.
- */
-declare const ArrowLeft: {
-    ({ strokeColor, fill, size, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * @param {string} size - The width and height of the icon in pixels. Defaults to 24.
- * @param {string} strokeColor - The color of the icon stroke. Defaults to 'currentcolor'.
- * @param {React.CSSProperties} styles - Additional CSS styles to apply to the icon.
- * @param {IconProps} props - Additional props to pass to the SVG element.
- * @returns {JSX.Element} - A chat icon component that displays a speech bubble with lines representing text.
- */
-declare const Chat: {
-    ({ size, strokeColor, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): JSX.Element;
-    styles: {
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * ArrowDown icon component
- * @param fill - Icon fill color
- * @param strokeColor - Icon stroke color
- * @param styles - Icon styles
- * @param size - Icon size
- */
-declare const ArrowDown: {
-    ({ fill, strokeColor, styles, size, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * ArrowUp icon component
- * @param fill - Icon fill color
- * @param strokeColor - Icon stroke color
- * @param styles - Icon styles
- * @param size - Icon size
- */
-declare const ArrowUp: {
-    ({ fill, strokeColor, styles, size, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    style: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-declare const ArrowRight: {
-    ({ size, fill, strokeColor, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const User: {
-    ({ size, fill, strokeColor, styles, alt, role, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * Renders a right arrow icon.
- *
- * @param {string} size - The size of the icon.
- * @param {string} fill - The fill color of the icon.
- * @param {React.CSSProperties} styles - The styles to apply to the icon.
- * @param {IconProps} props - The props to pass down to the icon.
- * @returns {JSX.Element} - A right arrow icon.
- */
-declare const Right: {
-    ({ size, fill, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-    };
-};
-
-/**
- * Left arrow icon
- * @param {string} fill - Icon fill color (default: 'currentColor')
- * @param {string} size - Icon size (default: '24')
- * @param {React.CSSProperties} styles - Icon styles (default: {})
- * @param {IconProps} props - Any other valid props for an SVG element
- * @returns {JSX.Element} - Rendered icon component
- */
-declare const Left: {
-    ({ fill, size, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-/**
- * Minus icon component
- * @param {string} size - Icon size (default: 24)
- * @param {string} fill - Icon fill color (default: 'currentColor')
- * @param {object} styles - Inline styles for the SVG element
- * @param {object} props - Any other SVG attributes
- * @returns {JSX.Element} - Rendered Minus icon component
- */
-declare const Minus: {
-    ({ size, fill, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-    };
-};
-
-/**
- * Remove icon component
- * @param {string} size - The size of the icon
- * @param {string} fill - The fill color of the icon
- * @param {object} styles - The styles to apply to the icon
- * @param {object} props - The additional props to pass to the icon
- * @returns {JSX.Element} - The Remove icon component
- */
-declare const Remove: {
-    ({ size, fill, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-    };
-};
-
-/**
- * Copy icon component
- * @param {string} size - The width and height of the icon
- * @param {string} strokeColor - The color of the icon stroke
- * @param {IconProps} props - The icon component props
- * @returns {JSX.Element} - A react JSX element representing the copy icon
- */
-declare const Copy: {
-    ({ size, strokeColor, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): JSX.Element;
-    displayName: string;
-    styles: {
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string; /**
-         * Copy icon component
-         * @param {string} size - The width and height of the icon
-         * @param {string} strokeColor - The color of the icon stroke
-         * @param {IconProps} props - The icon component props
-         * @returns {JSX.Element} - A react JSX element representing the copy icon
-         */
-    };
-};
-
-export { Add, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Chat, Code, Copy, Home, Left, Minus, Remove, Right, User };

package/dist/icons.d.ts

@@ -1,252 +0,0 @@
-import { a as IconProps } from './icon-e6044c73.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import 'react';
-export { I as Icon, b as IconProps, d as defaultStyles } from './icon-e6044c73.js';
-
-/**
- * Renders a code icon.
- *
- * @param {string} strokeColor - The color of the icon's stroke.
- * @param {string} fill - The color of the icon's fill.
- * @param {string} size - The size of the icon.
- * @param {string} viewBox - The viewBox of the icon.
- * @param {React.CSSProperties} styles - The default styles of the icon.
- * @param {IconProps} props - Additional props to apply to the icon.
- * @returns {JSX.Element} - A React component that renders an SVG icon.
- */
-declare const Code: {
-    ({ strokeColor, fill, size, styles, role, alt, ...props }?: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-/**
- * Renders a home icon.
- *
- * @param {string} strokeColor - The color of the icon's stroke.
- * @param {string} fill - The color of the icon's fill.
- * @param {string} size - The size of the icon.
- * @param {string} viewBox - The viewBox of the icon.
- * @param {string} name - The name of the icon.
- * @param {Object} styles - The styles of the icon.
- * @param {Object} props - The props of the icon.
- * @returns {JSX.Element} - A home icon.
- */
-declare const Home: {
-    ({ strokeColor, fill, size, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-/**
- * Add Icon component
- * @param {string} fill - Icon fill color (default: 'currentColor')
- * @param {string} size - Icon size (default: '24')
- * @param {IconProps} props - Other icon properties
- * @returns {JSX.Element} - Rendered component
- */
-declare const Add: {
-    ({ fill, size, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): JSX.Element;
-    styles: {
-        fill: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * Renders an arrow pointing to the left.
- *
- * @param {string} strokeColor - The color of the arrow's stroke.
- * @param {string} fill - The fill color of the arrow.
- * @param {string} size - The size of the arrow.
- * @param {object} styles - The styles to apply to the arrow.
- * @param {object} props - The additional props to pass to the SVG element.
- * @returns {JSX.Element} - A React component that renders an arrow pointing to the left.
- */
-declare const ArrowLeft: {
-    ({ strokeColor, fill, size, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * @param {string} size - The width and height of the icon in pixels. Defaults to 24.
- * @param {string} strokeColor - The color of the icon stroke. Defaults to 'currentcolor'.
- * @param {React.CSSProperties} styles - Additional CSS styles to apply to the icon.
- * @param {IconProps} props - Additional props to pass to the SVG element.
- * @returns {JSX.Element} - A chat icon component that displays a speech bubble with lines representing text.
- */
-declare const Chat: {
-    ({ size, strokeColor, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): JSX.Element;
-    styles: {
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * ArrowDown icon component
- * @param fill - Icon fill color
- * @param strokeColor - Icon stroke color
- * @param styles - Icon styles
- * @param size - Icon size
- */
-declare const ArrowDown: {
-    ({ fill, strokeColor, styles, size, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * ArrowUp icon component
- * @param fill - Icon fill color
- * @param strokeColor - Icon stroke color
- * @param styles - Icon styles
- * @param size - Icon size
- */
-declare const ArrowUp: {
-    ({ fill, strokeColor, styles, size, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    style: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-declare const ArrowRight: {
-    ({ size, fill, strokeColor, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const User: {
-    ({ size, fill, strokeColor, styles, alt, role, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    styles: {
-        fill: string;
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-    displayName: string;
-};
-
-/**
- * Renders a right arrow icon.
- *
- * @param {string} size - The size of the icon.
- * @param {string} fill - The fill color of the icon.
- * @param {React.CSSProperties} styles - The styles to apply to the icon.
- * @param {IconProps} props - The props to pass down to the icon.
- * @returns {JSX.Element} - A right arrow icon.
- */
-declare const Right: {
-    ({ size, fill, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-    };
-};
-
-/**
- * Left arrow icon
- * @param {string} fill - Icon fill color (default: 'currentColor')
- * @param {string} size - Icon size (default: '24')
- * @param {React.CSSProperties} styles - Icon styles (default: {})
- * @param {IconProps} props - Any other valid props for an SVG element
- * @returns {JSX.Element} - Rendered icon component
- */
-declare const Left: {
-    ({ fill, size, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-        display: string;
-        alignItems: string;
-        width: string;
-    };
-};
-
-/**
- * Minus icon component
- * @param {string} size - Icon size (default: 24)
- * @param {string} fill - Icon fill color (default: 'currentColor')
- * @param {object} styles - Inline styles for the SVG element
- * @param {object} props - Any other SVG attributes
- * @returns {JSX.Element} - Rendered Minus icon component
- */
-declare const Minus: {
-    ({ size, fill, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-    };
-};
-
-/**
- * Remove icon component
- * @param {string} size - The size of the icon
- * @param {string} fill - The fill color of the icon
- * @param {object} styles - The styles to apply to the icon
- * @param {object} props - The additional props to pass to the icon
- * @returns {JSX.Element} - The Remove icon component
- */
-declare const Remove: {
-    ({ size, fill, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-    styles: {
-        fill: string;
-    };
-};
-
-/**
- * Copy icon component
- * @param {string} size - The width and height of the icon
- * @param {string} strokeColor - The color of the icon stroke
- * @param {IconProps} props - The icon component props
- * @returns {JSX.Element} - A react JSX element representing the copy icon
- */
-declare const Copy: {
-    ({ size, strokeColor, styles, role, alt, ...props }: Pick<IconProps, 'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'>): JSX.Element;
-    displayName: string;
-    styles: {
-        stroke: string;
-        display: string;
-        alignItems: string;
-        width: string; /**
-         * Copy icon component
-         * @param {string} size - The width and height of the icon
-         * @param {string} strokeColor - The color of the icon stroke
-         * @param {IconProps} props - The icon component props
-         * @returns {JSX.Element} - A react JSX element representing the copy icon
-         */
-    };
-};
-
-export { Add, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Chat, Code, Copy, Home, Left, Minus, Remove, Right, User };

package/dist/icons.js

@@ -1,4 +0,0 @@
-import './chunk-PCDUGD3C.js';
-export { d as Add, g as ArrowDown, e as ArrowLeft, i as ArrowRight, h as ArrowUp, f as Chat, b as Code, o as Copy, c as Home, q as Icon, l as Left, m as Minus, n as Remove, k as Right, j as User, p as defaultStyles } from './chunk-GJWMCDFS.js';
-// # sourceMappingURL=out.js.map
-// # sourceMappingURL=icons.js.map

package/dist/index.cjs

@@ -1,59 +0,0 @@
-'use strict';
-
-var chunkD43FJIRQ_cjs = require('./chunk-D43FJIRQ.cjs');
-var chunk77CZU5XZ_cjs = require('./chunk-77CZU5XZ.cjs');
-var jsxRuntime = require('react/jsx-runtime');
-var Se = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var Se__default = /*#__PURE__*/_interopDefault(Se);
-
-var ae={paddingInline:"var(--badge-px, 0.7rem)",paddingBlock:"var(--badge-py, 0.2rem)",color:"var(--badge-cl, black)",fontSize:"var(--badge-fs, 0.8rem)",fontWeight:"var(--badge-fw, normal)",fontFamily:"var(--badge-ff, sans-serif)",border:"var(--badge-brd, none)",borderRadius:"var(--badge-rds, 99rem)",backgroundColor:'var(--badge-bg, "blue")',textDecoration:"var(--badge-decoration, none)",textTransform:"var(--badge-tt, var(--tt))"},D=i=>{var m=i,{elm:o="span",role:t,children:r,renderStyles:e=!0,styles:a={}}=m,p=chunk77CZU5XZ_cjs.c(m,["elm","role","children","renderStyles","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:o,role:t,styles:a},p),{children:r}))};D.styles=ae;D.displayName="Badge";var se={paddingInline:"var(--btn-px, 1.4rem)",paddingBlock:"var(--btn-py, 0.8rem)",display:"var(--btn-dsp, inline-flex)",placeItems:"var(--btn-place, center)",justifyContent:"var(--btn-justify, center)",cursor:"var(--btn-cursor, pointer)",border:"var(--btn-border, none)",color:"var(--btn-color, white)",backgroundColor:"var(--btn-bg, royalblue)",borderRadius:"var(--btn-radius, 0.2rem)"},E=c=>{var f=c,{type:o="button",children:t,styles:r,disabled:e,classes:a,pointerDown:p,pointerOver:i,pointerLeave:m}=f,y=chunk77CZU5XZ_cjs.c(f,["type","children","styles","disabled","classes","pointerDown","pointerOver","pointerLeave"]);return jsxRuntime.jsx("button",chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({type:o,onPointerOver:v=>{e||i==null||i(v);},onPointerDown:v=>{e||p==null||p(v);},onPointerLeave:v=>{e||m==null||m(v);},style:r,"aria-disabled":e},y),{children:t}))};E.styles=se;E.displayName="Button";var pe={padding:"var(--card-p, 2rem)",backgroundColor:"var(--card-bg, white)",boxShadow:"var(--card-shadow, 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.1))",borderRadius:"var(--card-rds, 0.2\xDFrem)",border:"var(--card-brd, none)",color:"var(--card-cl, black)"},A=m=>{var y=m,{elm:o="div",styles:t,children:r,renderStyles:e=!0,dataStyle:a,id:p}=y,i=chunk77CZU5XZ_cjs.c(y,["elm","styles","children","renderStyles","dataStyle","id"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:o,id:p,styles:t,renderStyles:e,"data-card":a},i),{children:r}))};A.styles=pe;A.displayName="Card";var L=p=>{var i=p,{id:o,children:t,modalRef:r,openOnMount:e}=i,a=chunk77CZU5XZ_cjs.c(i,["id","children","modalRef","openOnMount"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"dialog",id:o,ref:r,open:e,onClick:y=>{y.currentTarget===y.target&&y.currentTarget.close();}},a),{children:t}))};L.displayName="Dialog";var me={padding:"var(--card-p, 1.2rem)",backgroundColor:"var(--card-bg, white)"},F=i=>{var m=i,{title:o,children:t,styles:r,renderStyles:e=!0,onToggle:a}=m;chunk77CZU5XZ_cjs.c(m,["title","children","styles","renderStyles","onToggle"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,{as:"details",title:o,onToggle:c=>{a==null||a(c);},styles:r,children:t})};F.styles=me;F.displayName="Details";var ye={listStyle:"none",justifyContent:"var(--summary-justify, space-between)",color:"var(--summary-color, currentColor)",cursor:"var(--detail-cursor, pointer)"},N=a=>{var p=a,{children:o,styles:t,renderStyles:r=!0}=p,e=chunk77CZU5XZ_cjs.c(p,["children","styles","renderStyles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"summary",styles:t},e),{children:o}))};N.styles=ye;N.displayName="Summary";var ue={display:"flex",placeContent:"flex-start",placeItems:"center",gap:".7rem",border:"var(--summary-border, solid 1px #ccc)",transition:"all 0.2s ease",backgroundColor:"var(--summary-bg, whitesmoke)",padding:"var(--details-pd, 1.2rem)",minWidth:"var(--summary-min-w, 80vw)",maxWidth:"var(--summary-min-w, 80vw)"},M=i=>{var m=i,{styles:o,children:t,summary:r,toggle:e,renderStyles:a=!0}=m,p=chunk77CZU5XZ_cjs.c(m,["styles","children","summary","toggle","renderStyles"]);return jsxRuntime.jsxs(F,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({styles:o,onToggle:e},p),{children:[jsxRuntime.jsx(N,{children:r}),t]}))};M.styles=ue;M.Summary=N;M.Details=F;M.displayName="Dropdown";var xe={},O=p=>{var i=p,{labelFor:o,styles:t,label:r,children:e}=i;chunk77CZU5XZ_cjs.c(i,["labelFor","styles","label","children"]);return jsxRuntime.jsxs(chunkD43FJIRQ_cjs.a,{as:"div",styles:t,"data-style":"fields",children:[jsxRuntime.jsx("label",{htmlFor:o,children:r}),e]})};O.styles=xe;O.displayName="Field";var V=e=>{var a=e,{children:o,styles:t={}}=a,r=chunk77CZU5XZ_cjs.c(a,["children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"header"},r),{styles:t,children:jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,{as:"section",children:o})}))},X=e=>{var a=e,{children:o,styles:t={}}=a,r=chunk77CZU5XZ_cjs.c(a,["children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"main",styles:t},r),{children:o}))},_=e=>{var a=e,{children:o,styles:t={}}=a,r=chunk77CZU5XZ_cjs.c(a,["children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"footer",styles:t},r),{children:jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,{as:"section",children:o||"Copyright \xA9 2022"})}))},G=e=>{var a=e,{children:o,styles:t={}}=a,r=chunk77CZU5XZ_cjs.c(a,["children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"aside",styles:t},r),{children:jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,{as:"section",children:o})}))},Q=e=>{var a=e,{children:o,styles:t={}}=a,r=chunk77CZU5XZ_cjs.c(a,["children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"section",styles:t},r),{children:o}))},U=e=>{var a=e,{children:o,styles:t={}}=a,r=chunk77CZU5XZ_cjs.c(a,["children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"article",styles:t},r),{children:o}))};V.displayName="Header";X.displayName="Main";_.displayName="Footer";G.displayName="Aside";Q.displayName="Section";U.displayName="Article";var he={maxWidth:"var(--img-w, 100%)",height:"var(--img-h, auto)",objectFit:"var(--img-obj-fit, cover)",objectPosition:"var(--img-position, center center)",aspectRatio:"var(--img-ratio, auto 2/3)",display:"var(--img-display, initial)"},K=b=>{var P=b,{src:o,alt:t,width:r=480,height:e,styles:a,loading:p="lazy",placeholder:i=`https://via.placeholder.com/${r}?text=PLACEHOLDER`,fetchpriority:m="low",decoding:y="auto",imgLoaded:c,imgError:f}=P,u=chunk77CZU5XZ_cjs.c(P,["src","alt","width","height","styles","loading","placeholder","fetchpriority","decoding","imgLoaded","imgError"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.a({as:"img",src:o,alt:t,width:r,height:e||"auto",loading:p,style:a,onError:x=>{if(f){f==null||f(x);return}x.currentTarget.src!==i&&(x.currentTarget.src=i);},onLoad:x=>{c==null||c(x);}},u))};K.styles=he;K.displayName="Img";var Re={minWidth:"var(--input-min-w, 60%)"},W=k=>{var x=k,{type:o="text",name:t,value:r,placeholder:e,id:a,styles:p,classes:i,isDisabled:m,readonly:y,required:c,inputRef:f,inputChange:u,inputBlur:b,inputDown:P}=x,v=chunk77CZU5XZ_cjs.c(x,["type","name","value","placeholder","id","styles","classes","isDisabled","readonly","required","inputRef","inputChange","inputBlur","inputDown"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.a({as:"input",id:a,type:o,placeholder:e,className:i,styles:p,onChange:C=>{u&&!m&&(u==null||u(C));},onBlur:C=>{b&&!m&&(b==null||b(C));},onKeyDown:C=>{P&&!m&&(C.preventDefault(),P==null||P(C));},value:r,name:t,ref:f,"aria-disabled":m,"tab-index":m?-1:void 0,"aria-readonly":y,readOnly:y},v))};W.styles=Re;W.displayName="Input";var q=y=>{var c=y,{href:o,target:t,rel:r,children:e,styles:a={},prefetch:p=!0,onPointerDown:i}=c,m=chunk77CZU5XZ_cjs.c(c,["href","target","rel","children","styles","prefetch","onPointerDown"]);let f=r;return t==="_blank"&&(f=`noopener noreferrer ${p?"prefetch":""}`),jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"a",href:o,target:t,styles:a,rel:f,onPointerDown:b=>{i&&(i==null||i(b));}},m),{children:e!=null?e:"Link"}))},Ee=q;q.displayName="Link";var Ne=i=>{var m=i,{children:o,classes:t,type:r="ul",variant:e,styles:a}=m,p=chunk77CZU5XZ_cjs.c(m,["children","classes","type","variant","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:r,"data-variant":e,className:t,style:a},p),{children:o}))};var Y=m=>{var y=m,{openChild:o,closeChild:t,modalHeader:r,modalFooter:e,children:a,showOpen:p=!1}=y,i=chunk77CZU5XZ_cjs.c(y,["openChild","closeChild","modalHeader","modalFooter","children","showOpen"]);let c=Se__default.default.useRef(null),f=()=>{c.current&&(p?c.current.show():c.current.showModal());},u=()=>{c.current&&c.current.close();};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(L,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({modalRef:c,openOnMount:p},i),{children:jsxRuntime.jsxs("section",{children:[r,a,e!=null?e:jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx(E,{type:"button",pointerDown:()=>{u();},children:t||"Close"})," "]})]})})),!p&&jsxRuntime.jsx(E,{type:"button",pointerDown:f,children:o||"Open Modal"})]})};Y.displayName="Modal";var H=r=>{var e=r,{children:o}=e,t=chunk77CZU5XZ_cjs.c(e,["children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"caption"},t),{children:o}))},I=r=>{var e=r,{children:o}=e,t=chunk77CZU5XZ_cjs.c(e,["children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"thead"},t),{children:o}))},S=r=>{var e=r,{children:o}=e,t=chunk77CZU5XZ_cjs.c(e,["children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"tbody"},t),{children:o}))},w=r=>{var e=r,{children:o}=e,t=chunk77CZU5XZ_cjs.c(e,["children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"tr"},t),{children:o}))},Z=r=>{var e=r,{children:o}=e,t=chunk77CZU5XZ_cjs.c(e,["children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"td"},t),{children:o}))},B=a=>{var p=a,{id:o,dataStyle:t,children:r}=p,e=chunk77CZU5XZ_cjs.c(p,["id","dataStyle","children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:"section",id:o},e),{"data-style":"table-wrapper",children:jsxRuntime.jsx("table",{children:r})}))};B.displayName="Table";H.displayName="Caption";I.displayName="Thead";S.displayName="Tbody";w.displayName="Tr";Z.displayName="Td";var j=({tblBody:o,tblCaption:t,tblHead:r})=>jsxRuntime.jsxs(B,{children:[t&&jsxRuntime.jsx(H,{children:t}),jsxRuntime.jsx(I,{children:jsxRuntime.jsx(w,{children:r})}),jsxRuntime.jsx(S,{children:o})]});j.displayName="TBL";var ee=p=>{var i=p,{elm:o="p",text:t,styles:r,children:e}=i,a=chunk77CZU5XZ_cjs.c(i,["elm","text","styles","children"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:o,styles:r},a),{children:e||t}))},te=a=>{var p=a,{elm:o="h3",children:t,styles:r}=p,e=chunk77CZU5XZ_cjs.c(p,["elm","children","styles"]);return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.b(chunk77CZU5XZ_cjs.a({as:o,styles:r},e),{children:t}))};ee.displayName="Text";te.displayName="Title";var ke={},oe=b=>{var P=b,{value:o,rows:t,cols:r,id:e,required:a,disabled:p,readonly:i,textareaBlur:m,textareaChange:y,textareaDown:c,textareaRef:f}=P,u=chunk77CZU5XZ_cjs.c(P,["value","rows","cols","id","required","disabled","readonly","textareaBlur","textareaChange","textareaDown","textareaRef"]);let v=R=>{y&&!p&&y(R);},k=R=>{m&&!p&&(m==null||m(R));},x=R=>{c&&!p&&(c==null||c(R));};return jsxRuntime.jsx(chunkD43FJIRQ_cjs.a,chunk77CZU5XZ_cjs.a({as:"textarea",ref:f,rows:t,cols:r,styles:chunk77CZU5XZ_cjs.a({},ke),"data-style":"textarea",id:e,required:a,value:o,"aria-disabled":p,readOnly:i,onChange:v,onBlur:k,onKeyDown:x},u))};oe.displayName="Textarea";
-
-Object.defineProperty(exports, 'Box', {
-	enumerable: true,
-	get: function () { return chunkD43FJIRQ_cjs.a; }
-});
-Object.defineProperty(exports, 'FP', {
-	enumerable: true,
-	get: function () { return chunkD43FJIRQ_cjs.a; }
-});
-Object.defineProperty(exports, 'Icon', {
-	enumerable: true,
-	get: function () { return chunkD43FJIRQ_cjs.q; }
-});
-Object.defineProperty(exports, 'Tag', {
-	enumerable: true,
-	get: function () { return chunkD43FJIRQ_cjs.a; }
-});
-exports.Article = U;
-exports.Aside = G;
-exports.Badge = D;
-exports.Button = E;
-exports.Caption = H;
-exports.Card = A;
-exports.Dialog = L;
-exports.Dropdown = M;
-exports.Field = O;
-exports.Footer = _;
-exports.Header = V;
-exports.Img = K;
-exports.Input = W;
-exports.Link = q;
-exports.List = Ne;
-exports.Main = X;
-exports.Modal = Y;
-exports.Section = Q;
-exports.TBL = j;
-exports.Table = B;
-exports.Tbody = S;
-exports.Td = Z;
-exports.Text = ee;
-exports.Textarea = oe;
-exports.Thead = I;
-exports.Title = te;
-exports.To = Ee;
-exports.Tr = w;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.cjs.map