@bynder/compact-view 5.2.0 → 5.2.2

package/SwitchNLS.js

@@ -1,13 +1,16 @@
 import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import r from "styled-components";
-import { token as e, textStyles as s, TruncatedText as c, Switch as f } from "@bynder/design-system";
-import { IconSmart as m } from "@bynder/icons";
+import o from "./styled-components.browser.esm.js";
+import { Switch as m } from "./Switch.js";
+import { TruncatedText as c } from "./TruncatedText.js";
+import { token as r } from "./token.js";
+import { textStyles as s } from "./textStyles.js";
+import { IconSmart as f } from "./index4.js";
 import { __ as d } from "./index2.js";
-const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
+const j = ({ isNLSSearchOn: e, setIsNLSSearchOn: n }) => {
   const a = (t) => {
-    t && t.currentTarget !== t.target || (t?.stopPropagation(), o(!n));
+    t && t.currentTarget !== t.target || (t?.stopPropagation(), n(!e));
   }, g = () => {
-    o(!n);
+    n(!e);
   };
   return /* @__PURE__ */ l(
     p,
@@ -19,15 +22,15 @@ const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
       tabIndex: 0,
       "data-testid": "switch-nls-container",
       children: [
-        /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(m, {}) }),
+        /* @__PURE__ */ i(h, { children: /* @__PURE__ */ i(f, {}) }),
         /* @__PURE__ */ l(u, { id: "labelId", children: [
           /* @__PURE__ */ i(c, { children: d("Use natural language search") }),
           /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i(c, { children: d("Find images by describing them") }) })
         ] }),
         /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i(
-          f,
+          m,
           {
-            isChecked: n,
+            isChecked: e,
             "aria-labelledby": "labelId",
             onChange: g
           }
@@ -35,14 +38,14 @@ const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
       ]
     }
   );
-}, p = r.div`
+}, p = o.div`
 	display: flex;
 
 	align-items: flex-start;
-	margin: ${e.spacing3};
-	padding: ${e.spacing3};
+	margin: ${r.spacing3};
+	padding: ${r.spacing3};
 	background-color: #f3f2fd;
-	border-radius: ${e.radiusLarge};
+	border-radius: ${r.radiusLarge};
 
 	&:hover {
 		background-color: #eeedfc;
@@ -52,29 +55,28 @@ const C = ({ isNLSSearchOn: n, setIsNLSSearchOn: o }) => {
 	&:active {
 		background-color: #f3f2fd;
 	}
-`, h = r.div`
+`, h = o.div`
 	flex: none;
-	margin-right: ${e.spacing4};
-	color: ${e.purple500};
-`, u = r.div`
+	margin-right: ${r.spacing4};
+	color: ${r.purple500};
+`, u = o.div`
 	${s.uiTextM}
 
 	flex: 1;
 	min-width: 0;
 	font-weight: 400;
 	color: #031026;
-`, x = r.div`
+`, x = o.div`
 	${s.uiTextS}
 
-	color: ${e.colorTextMuted};
-`, b = r.div`
+	color: ${r.colorTextMuted};
+`, b = o.div`
 	display: flex;
 	flex: none;
-	gap: ${e.spacing3};
+	gap: ${r.spacing3};
 	align-items: center;
-	margin-left: ${e.spacing4};
+	margin-left: ${r.spacing4};
 `;
 export {
-  C as SwitchNLS
+  j as SwitchNLS
 };
-//# sourceMappingURL=SwitchNLS.js.map

package/Tabs2.js

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Box as d } from "./Box.js";
+function n({
+  children: o
+}) {
+  return /* @__PURE__ */ t(d, { paddingTop: "6", paddingRight: "6", paddingBottom: "3", paddingLeft: "6", children: o });
+}
+export {
+  n as Tabs
+};

package/TagItem.js

@@ -1,29 +1,29 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { styled as n } from "styled-components";
-import { token as s } from "@bynder/design-system";
-import { Chip as l } from "./Chip.js";
-import { useAssetFilter as r } from "./AssetFilterContext.js";
+import n from "./styled-components.browser.esm.js";
+import { token as s } from "./token.js";
+import { Chip as r } from "./Chip2.js";
+import { useAssetFilter as g } from "./AssetFilterContext.js";
 function x(t) {
-  const e = r(), i = e.tags.includes(t.tag.name);
+  const e = g(), i = e.tags.includes(t.tag.name);
   function o() {
     i ? e.removeTag(t.tag.name) : t.isLoading || e.addTag(t.tag.name);
   }
   return /* @__PURE__ */ m(
-    l,
+    r,
     {
       loading: t.isLoading,
       active: i,
       onClick: o,
       "data-testid": "tag-item",
       children: [
-        /* @__PURE__ */ a(g, { children: t.tag.name }),
+        /* @__PURE__ */ a(l, { children: t.tag.name }),
         /* @__PURE__ */ a(c, { children: t.tag.assetCount })
       ]
     },
     t.tag.id
   );
 }
-const g = n.span`
+const l = n.span`
 	max-with: 128px;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -35,4 +35,3 @@ const g = n.span`
 export {
   x as TagItem
 };
-//# sourceMappingURL=TagItem.js.map

package/Tags.js

@@ -1,14 +1,14 @@
 import { jsx as n, jsxs as a, Fragment as e } from "react/jsx-runtime";
-import { styled as s } from "styled-components";
-import { token as i } from "@bynder/design-system";
-import { IconTag as d } from "@bynder/icons";
+import s from "./styled-components.browser.esm.js";
+import { token as i } from "./token.js";
+import { IconTag as d } from "./index4.js";
 import { Dropdown as p } from "./Dropdown.js";
 import { __ as g } from "./index2.js";
 import { TagItem as c } from "./TagItem.js";
 import { Spinner as m } from "./Spinner.js";
-function j(t) {
-  const o = l(t.tags);
-  return /* @__PURE__ */ n(p, { title: /* @__PURE__ */ n(f, {}), isSmall: !0, fadeIn: !0, children: () => /* @__PURE__ */ a(e, { children: [
+function y(t) {
+  const o = f(t.tags);
+  return /* @__PURE__ */ n(p, { title: /* @__PURE__ */ n(l, {}), isSmall: !0, fadeIn: !0, children: () => /* @__PURE__ */ a(e, { children: [
     t.isLoading && /* @__PURE__ */ n(m, {}),
     /* @__PURE__ */ a(h, { children: [
       " ",
@@ -18,10 +18,10 @@ function j(t) {
     /* @__PURE__ */ n(u, { children: o.map((r) => /* @__PURE__ */ n(c, { tag: r, isLoading: t.isLoading }, r.id)) })
   ] }) });
 }
-function l(t) {
+function f(t) {
   return [...t].sort((o, r) => r.assetCount - o.assetCount);
 }
-function f() {
+function l() {
   return /* @__PURE__ */ a(e, { children: [
     /* @__PURE__ */ n(T, {}),
     /* @__PURE__ */ n("span", { "data-testid": "tags-filter", children: g("Tags") })
@@ -43,6 +43,5 @@ const h = s.h1`
 	width: ${i.spacing6};
 `;
 export {
-  j as Tags
+  y as Tags
 };
-//# sourceMappingURL=Tags.js.map

package/Text2.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Dropdown as e } from "./Dropdown2.js";
+function n({
+  children: t,
+  ...o
+}) {
+  return /* @__PURE__ */ r(e.Text, { fontSize: "list-item", ...o, children: t });
+}
+export {
+  n as Text
+};

package/Text22.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import m from "./styled-components.browser.esm.js";
+import { textStyles as e } from "./textStyles.js";
+import { token as o } from "./token.js";
+function s({
+  fontSize: t = "item",
+  children: i,
+  ...n
+}) {
+  return /* @__PURE__ */ r(p, { $fontSize: t, ...n, children: i });
+}
+const p = m.div.withConfig({
+  displayName: "TextStyled",
+  componentId: "sc-15vtjf7-0"
+})(["", " padding:", " ", ";color:", ";"], (t) => t.$fontSize === "item" ? e.uiTextS : e.uiTextM, o.spacing3, o.spacing5, o.gray400);
+export {
+  s as Text
+};

package/Text4.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "./styled-components.browser.esm.js";
+import { textStyles as e } from "./textStyles.js";
+import { token as i } from "./token.js";
+import { internalTokens as p } from "./themes3.js";
+function f({
+  children: t
+}) {
+  return /* @__PURE__ */ o(n, { children: t });
+}
+const n = r.div.withConfig({
+  displayName: "StyledText",
+  componentId: "sc-juvpf5-0"
+})(["", " padding-block:", ";color:", ";"], e.paragraphS, i.spacing3, p["tooltip-text-color"]);
+export {
+  n as StyledText,
+  f as Text
+};

package/Textarea.js

@@ -0,0 +1,92 @@
+import { jsx as I } from "react/jsx-runtime";
+import { forwardRef as R, useRef as S } from "react";
+import C, { css as O } from "./styled-components.browser.esm.js";
+import { textStyles as z } from "./textStyles.js";
+import { token as e } from "./token.js";
+import { MINIMUM_ROWS as A, MAXIMUM_ROWS as B } from "./normalizeRows.js";
+import { useAutoHeight as D } from "./useAutoHeight.js";
+import { mergeRefs as N } from "./mergeRefs.js";
+import { makeInternalTokens as U } from "./makeInternalTokens.js";
+const J = R(({
+  id: a,
+  isDisabled: l = !1,
+  isReadOnly: d = !1,
+  isInvalid: i = !1,
+  onBlur: s,
+  onChange: o,
+  onFocus: n,
+  onKeyDown: b,
+  placeholder: c,
+  value: f,
+  "aria-label": x,
+  "aria-labelledby": g,
+  "aria-describedby": m,
+  minRows: h = A,
+  maxRows: u = B,
+  maxLength: p,
+  autoFocus: y = !1,
+  ...T
+}, v) => {
+  const t = S(null);
+  D(t, h, u);
+  function k(w) {
+    if (o) {
+      const M = w.currentTarget.value;
+      o(M);
+    }
+  }
+  return /* @__PURE__ */ I(
+    _,
+    {
+      value: f,
+      onChange: k,
+      id: a,
+      disabled: l,
+      readOnly: d,
+      $isInvalid: i,
+      "aria-label": x,
+      "aria-labelledby": g,
+      "aria-describedby": m,
+      onBlur: s,
+      onFocus: n,
+      onKeyDown: b,
+      placeholder: c,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoFocus: y,
+      ref: N(v, t),
+      maxLength: p,
+      ...T
+    }
+  );
+}), {
+  internalTokens: r,
+  declareTokens: W
+} = U({
+  lightTheme: {
+    "textarea-fill": e.gray10,
+    "textarea-fill-disabled": e.gray25,
+    "textarea-border": e.gray100,
+    "textarea-border-hover": e.gray200,
+    "textarea-border-focus": e.gray300,
+    "textarea-border-disabled": e.gray100,
+    "textarea-shadow-hover": e.elevation1,
+    "textarea-focus-ring": e.gray100
+  },
+  darkTheme: {
+    "textarea-fill": "transparent",
+    "textarea-fill-disabled": e.gray50a,
+    "textarea-border": e.gray200a,
+    "textarea-border-hover": e.gray300a,
+    "textarea-border-focus": e.gray400a,
+    "textarea-border-disabled": e.gray100a,
+    "textarea-shadow-hover": "none",
+    "textarea-focus-ring": e.gray300a
+  }
+}), _ = C.textarea.withConfig({
+  displayName: "TextareaStyled",
+  componentId: "sc-tq6lgg-0"
+})(["&&{", " display:block;box-sizing:border-box;width:100%;margin:0;padding:", " ", ";border:1px solid ", ";border-radius:", ";background:", ";color:", ";outline:none;font-family:", ";resize:none;transition:none;", " &::placeholder{color:", ";}&:hover{border-color:", ";box-shadow:", ";}&:focus{border-color:", ";box-shadow:0 0 0 3px ", ";}&:disabled{border-color:", ";background:", ";color:", ";box-shadow:none;&::placeholder{color:", ";}}", ";}"], W, e.spacing3, e.spacing5, r["textarea-border"], e.radiusBase, r["textarea-fill"], e.colorText, e.brandFontStackBase, z.paragraphM, e.colorTextDisabled, r["textarea-border-hover"], r["textarea-shadow-hover"], r["textarea-border-focus"], r["textarea-focus-ring"], r["textarea-border-disabled"], r["textarea-fill-disabled"], e.colorTextMuted, e.colorTextDisabled, (a) => a.$isInvalid && O(["border-color:", ";&:hover{border-color:", ";}&:focus{border-color:", ";}"], e.red500, e.red600, e.red500));
+export {
+  J as Textarea
+};

package/Theming.js

@@ -1,4 +1,4 @@
-import { css as n, createGlobalStyle as i } from "styled-components";
+import { css as n, createGlobalStyle as i } from "./styled-components.browser.esm.js";
 const c = (o) => ({
   // Button component
   "--componentButtonPrimaryBorderHover": o?.colorButtonPrimaryHover,
@@ -15,16 +15,15 @@ const c = (o) => ({
   "--componentButtonPrimaryFillFocus": o?.colorButtonPrimary
 }), u = i`${n`
 	.cv-root {
-		${(o) => l(o.theme)}
+		${(o) => a(o.theme)}
 	}:
 `}`;
-function l(o) {
+function a(o) {
   const r = c(o);
   return Object.entries(r).map((t) => t.join(":")).join(";") + ";";
 }
 export {
   u as ThemeStyles,
-  l as stringifyTheme,
+  a as stringifyTheme,
   c as themeVariables
 };
-//# sourceMappingURL=Theming.js.map

package/Thumb.js

@@ -0,0 +1,28 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { ThumbContainer as p, ThumbCircle as u } from "./styles.js";
+import { Tooltip as d } from "./Tooltip2.js";
+import { getThumbPosition as f } from "./getThumbPosition.js";
+function C({
+  min: t,
+  max: r,
+  value: i,
+  isTooltipOpen: e,
+  inputPosition: s,
+  isInactive: m,
+  isDisabled: o
+}) {
+  const a = f(t, r, i);
+  return /* @__PURE__ */ l(p, { $isInactive: m, $isDisabled: o, style: h(a), "data-testid": "ds-slider-thumb", children: [
+    /* @__PURE__ */ n(u, { $isDisabled: o }),
+    s === "none" && /* @__PURE__ */ n(d, { isOpen: e, content: i, position: "top-center", children: (c) => /* @__PURE__ */ n("div", { ...c }) })
+  ] });
+}
+function h(t) {
+  return {
+    left: t,
+    transform: `translateY(-50%) translateX(calc(${t} * -1))`
+  };
+}
+export {
+  C as Thumb
+};

package/Thumbnail.js

@@ -0,0 +1,91 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import s, { css as y } from "./styled-components.browser.esm.js";
+import { token as t } from "./token.js";
+import { pointerEventsClassname as p, Overlay as C } from "./Overlay.js";
+import { GAP as b, INDICATORS_VALUES as I } from "./constants2.js";
+import { Indicator as $ } from "./Indicator.js";
+import { Status as k } from "./Status.js";
+import { useId as S } from "./useId.js";
+function M({
+  size: h = "m",
+  shape: v = "square",
+  variant: n = "clean",
+  icon: z,
+  imageUrl: o,
+  backgroundColor: a,
+  iconColor: l,
+  children: x,
+  ...g
+}) {
+  const d = n === "content", c = n === "clean", w = a ? t[a] || a : c ? t.gray50a : !a && !o ? t.white : "transparent", H = c ? t[l] || l || t.gray600 : void 0, r = v === "circle" ? "50%" : n === "preview" ? "0" : "5px", m = S("thumbnail-mask");
+  return /* @__PURE__ */ e(N, { $size: h, $shape: v, className: p, style: {
+    "--ds-thumbnail-border-radius": r
+  }, ...g, children: [
+    /* @__PURE__ */ e(j, { role: "none", children: [
+      /* @__PURE__ */ e("mask", { id: m, children: [
+        /* @__PURE__ */ i("rect", { fill: "white", x: "0", y: "0", width: "100%", height: "100%", rx: r }),
+        /* @__PURE__ */ i(A, {})
+      ] }),
+      /* @__PURE__ */ e("g", { mask: `url(#${m})`, children: [
+        d && /* @__PURE__ */ i(R, {}),
+        /* @__PURE__ */ i("rect", { fill: w, x: "0", y: "0", width: "100%", height: "100%", rx: r, "data-testid": "ds-thumbnail-fill" }),
+        o && /* @__PURE__ */ i("image", { x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: `xMidYMid ${n === "preview" ? "meet" : "slice"}`, xlinkHref: o, "data-testid": "ds-thumbnail-image" }),
+        d && /* @__PURE__ */ i("rect", { fill: "none", x: "0", y: "0", width: "100%", height: "100%", stroke: "rgba(0,0,0,0.1)", strokeWidth: "2", rx: r, "data-testid": "ds-thumbnail-inner-shadow" })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(E, { $iconColor: H, $size: h, "data-testid": "ds-thumbnail-content", children: [
+      z,
+      d && !a && !o && /* @__PURE__ */ i(O, { "data-testid": "ds-thumbnail-no-image-line" })
+    ] }),
+    x
+  ] });
+}
+M.Overlay = C;
+M.pointerEventsClassname = p;
+M.Indicator = $;
+M.Status = k;
+const u = {
+  xs: "24px",
+  s: "32px",
+  m: "40px",
+  l: "64px"
+}, N = s.div.withConfig({
+  displayName: "ThumbnailContainer",
+  componentId: "sc-womslj-0"
+})(["position:relative;flex:none;width:", ";height:", ";&:has([data-thumbnail-status]){", "}&:has([data-thumbnail-indicator]){", "}"], (h) => u[h.$size], (h) => u[h.$size], f("status"), f("indicator"));
+function f(h) {
+  return (v) => {
+    const {
+      radius: n,
+      offset: z
+    } = I[h][v.$shape][v.$size];
+    return y(["--ds-thumbnail-indicator-offset-x:", "px;--ds-thumbnail-indicator-offset-y:", "px;--ds-thumbnail-indicator-radius:", "px;--ds-thumbnail-overlay-indicator-cutout:-webkit-radial-gradient( calc( 100% - ( var(--ds-thumbnail-indicator-radius) - var( --ds-thumbnail-indicator-offset-x ) ) ) calc( 100% - ( var(--ds-thumbnail-indicator-radius) - var( --ds-thumbnail-indicator-offset-y ) ) ),circle,transparent calc(var(--ds-thumbnail-indicator-radius) + ", "px),black 0 );--ds-thumbnail-indicator-color:black;"], z[0], z[1], n, b);
+  };
+}
+const j = s.svg.withConfig({
+  displayName: "Svg",
+  componentId: "sc-womslj-1"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;"]), A = s.circle.withConfig({
+  displayName: "Cutout",
+  componentId: "sc-womslj-2"
+})(["fill:var(--ds-thumbnail-indicator-color,white);cx:calc(100% - var(--ds-thumbnail-indicator-radius) + var(--ds-thumbnail-indicator-offset-x));cy:calc(100% - var(--ds-thumbnail-indicator-radius) + var(--ds-thumbnail-indicator-offset-y));r:calc(var(--ds-thumbnail-indicator-radius) + ", "px);"], b), T = {
+  xs: t.fontSize100,
+  s: t.fontSize200,
+  m: t.fontSize500,
+  l: t.fontSize500
+}, E = s.div.withConfig({
+  displayName: "Content",
+  componentId: "sc-womslj-3"
+})(["position:absolute;inset:0;display:grid;place-items:center;color:", ";font-weight:600;font-size:", ";line-height:1;"], (h) => h.$iconColor, (h) => T[h.$size]), O = s.div.withConfig({
+  displayName: "NoImage",
+  componentId: "sc-womslj-4"
+})(["width:80%;height:2px;border-radius:2px;background:", ";transform:rotate(-45deg);"], t.red500);
+function R() {
+  return /* @__PURE__ */ e("g", { children: [
+    /* @__PURE__ */ i("rect", { height: "64", width: "64", x: "0", y: "0", fill: "#ffffff" }),
+    /* @__PURE__ */ i("path", { fill: "#e9ecee", d: "M0 0h4v4H0zM0 8h4v4H0zM0 16h4v4H0zM0 24h4v4H0zM0 32h4v4H0zM0 40h4v4H0zM0 48h4v4H0zM0 56h4v4H0zM4 4h4v4H4zM4 12h4v4H4zM4 20h4v4H4zM4 28h4v4H4zM4 36h4v4H4zM4 44h4v4H4zM4 52h4v4H4zM4 60h4v4H4zM8 0h4v4H8zM8 8h4v4H8zM8 16h4v4H8zM8 24h4v4H8zM8 32h4v4H8zM8 40h4v4H8zM8 48h4v4H8zM8 56h4v4H8zM12 4h4v4h-4zM12 12h4v4h-4zM12 20h4v4h-4zM12 28h4v4h-4zM12 36h4v4h-4zM12 44h4v4h-4zM12 52h4v4h-4zM12 60h4v4h-4zM16 0h4v4h-4zM16 8h4v4h-4zM16 16h4v4h-4zM16 24h4v4h-4zM16 32h4v4h-4zM16 40h4v4h-4zM16 48h4v4h-4zM16 56h4v4h-4zM20 4h4v4h-4zM20 12h4v4h-4zM20 20h4v4h-4zM20 28h4v4h-4zM20 36h4v4h-4zM20 44h4v4h-4zM20 52h4v4h-4zM20 60h4v4h-4zM24 0h4v4h-4zM24 8h4v4h-4zM24 16h4v4h-4zM24 24h4v4h-4zM24 32h4v4h-4zM24 40h4v4h-4zM24 48h4v4h-4zM24 56h4v4h-4zM28 4h4v4h-4zM28 12h4v4h-4zM28 20h4v4h-4zM28 28h4v4h-4zM28 36h4v4h-4zM28 44h4v4h-4zM28 52h4v4h-4zM28 60h4v4h-4zM32 0h4v4h-4zM32 8h4v4h-4zM32 16h4v4h-4zM32 24h4v4h-4zM32 32h4v4h-4zM32 40h4v4h-4zM32 48h4v4h-4zM32 56h4v4h-4zM36 4h4v4h-4zM36 12h4v4h-4zM36 20h4v4h-4zM36 28h4v4h-4zM36 36h4v4h-4zM36 44h4v4h-4zM36 52h4v4h-4zM36 60h4v4h-4zM40 0h4v4h-4zM40 8h4v4h-4zM40 16h4v4h-4zM40 24h4v4h-4zM40 32h4v4h-4zM40 40h4v4h-4zM40 48h4v4h-4zM40 56h4v4h-4zM44 4h4v4h-4zM44 12h4v4h-4zM44 20h4v4h-4zM44 28h4v4h-4zM44 36h4v4h-4zM44 44h4v4h-4zM44 52h4v4h-4zM44 60h4v4h-4zM48 0h4v4h-4zM48 8h4v4h-4zM48 16h4v4h-4zM48 24h4v4h-4zM48 32h4v4h-4zM48 40h4v4h-4zM48 48h4v4h-4zM48 56h4v4h-4zM52 4h4v4h-4zM52 12h4v4h-4zM52 20h4v4h-4zM52 28h4v4h-4zM52 36h4v4h-4zM52 44h4v4h-4zM52 52h4v4h-4zM52 60h4v4h-4zM56 0h4v4h-4zM56 8h4v4h-4zM56 16h4v4h-4zM56 24h4v4h-4zM56 32h4v4h-4zM56 40h4v4h-4zM56 48h4v4h-4zM56 56h4v4h-4zM60 4h4v4h-4zM60 12h4v4h-4zM60 20h4v4h-4zM60 28h4v4h-4zM60 36h4v4h-4zM60 44h4v4h-4zM60 52h4v4h-4zM60 60h4v4h-4z" })
+  ] });
+}
+export {
+  M as Thumbnail
+};

package/Tokenizer.js

@@ -0,0 +1,147 @@
+import { assign as p, strlen as x, charat as h, trim as j, from as q, substr as z, append as A } from "./Utility.js";
+var u = 1, a = 1, b = 0, r = 0, n = 0, t = "";
+function B(e, c, m, g, k, w, d, v) {
+  return { value: e, root: c, parent: m, type: g, props: k, children: w, line: u, column: a, length: d, return: "", siblings: v };
+}
+function C(e, c) {
+  return p(B("", null, null, "", null, null, 0, e.siblings), e, { length: -e.length }, c);
+}
+function F(e) {
+  for (; e.root; )
+    e = C(e.root, { children: [e] });
+  A(e, e.siblings);
+}
+function G() {
+  return n;
+}
+function H() {
+  return n = r > 0 ? h(t, --r) : 0, a--, n === 10 && (a = 1, u--), n;
+}
+function i() {
+  return n = r < b ? h(t, r++) : 0, a++, n === 10 && (a = 1, u++), n;
+}
+function s() {
+  return h(t, r);
+}
+function D() {
+  return r;
+}
+function l(e, c) {
+  return z(t, e, c);
+}
+function f(e) {
+  switch (e) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    // ; { } breakpoint token
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function I(e) {
+  return u = a = 1, b = x(t = e), r = 0, [];
+}
+function J(e) {
+  return t = "", e;
+}
+function K(e) {
+  return j(l(r - 1, o(e === 91 ? e + 2 : e === 40 ? e + 1 : e)));
+}
+function L(e) {
+  for (; (n = s()) && n < 33; )
+    i();
+  return f(e) > 2 || f(n) > 3 ? "" : " ";
+}
+function M(e, c) {
+  for (; --c && i() && !(n < 48 || n > 102 || n > 57 && n < 65 || n > 70 && n < 97); )
+    ;
+  return l(e, D() + (c < 6 && s() == 32 && i() == 32));
+}
+function o(e) {
+  for (; i(); )
+    switch (n) {
+      // ] ) " '
+      case e:
+        return r;
+      // " '
+      case 34:
+      case 39:
+        e !== 34 && e !== 39 && o(n);
+        break;
+      // (
+      case 40:
+        e === 41 && o(e);
+        break;
+      // \
+      case 92:
+        i();
+        break;
+    }
+  return r;
+}
+function N(e, c) {
+  for (; i() && e + n !== 57; )
+    if (e + n === 84 && s() === 47)
+      break;
+  return "/*" + l(c, r - 1) + "*" + q(e === 47 ? e : i());
+}
+function O(e) {
+  for (; !f(s()); )
+    i();
+  return l(e, r);
+}
+export {
+  I as alloc,
+  D as caret,
+  G as char,
+  n as character,
+  t as characters,
+  a as column,
+  N as commenter,
+  C as copy,
+  J as dealloc,
+  K as delimit,
+  o as delimiter,
+  M as escaping,
+  O as identifier,
+  b as length,
+  F as lift,
+  u as line,
+  i as next,
+  B as node,
+  s as peek,
+  r as position,
+  H as prev,
+  l as slice,
+  f as token,
+  L as whitespace
+};