@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/CheckBoxInput.cjs

@@ -0,0 +1,118 @@
+"use strict";const n=require("react/jsx-runtime"),z=require("react"),t=require("./index-DXnSjbfJ.cjs"),R=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),o=require("./utils-hdRGTsQ7.cjs"),j=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),V=e=>e=="left"?"row-reverse":"row",i=(e,s)=>`calc(${e.components.Checkbox.default.enabled.sizes[s]} / 2)`,O=R.newStyled.label`
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
+  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  flex-direction: ${e=>V(e.labelPosition)};
+  ${e=>e.spaceBetween==!0&&"justify-content: space-between;"}
+  width: 100%;
+  ${e=>e.disabled===!0&&"pointer-events: none;"}
+  ${e=>o.getComponentTypographyCss(e.theme,"Checkbox",e.size,"enabled")};
+  gap: 0.75rem;
+  position: relative;
+  & .checkbox-label {
+    ${e=>!e.disabled&&e.readOnly!==!0&&"cursor: pointer;"}
+    min-width: 0;
+    flex-shrink: 1;
+    min-height: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
+  }
+  & input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    z-index: 3;
+  }
+  & input:focus {
+    outline: none;
+    background: transparent;
+  }
+  & input:active {
+    outline: none;
+    background: transparent;
+  }
+  & .checkmark {
+    min-height: ${e=>e.theme.components.Checkbox.default.enabled.sizes[e.size]};
+    min-width: ${e=>e.theme.components.Checkbox.default.enabled.sizes[e.size]};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease;
+    background-color: transparent;
+    color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
+    border: 1px solid
+      ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","border")};
+    border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"slight")};
+    ${e=>e.disabled===!0&&`background-color: ${o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")}`};
+    & svg {
+      height: 0;
+      width: 0;
+      stroke: transparent;
+    }
+    & img {
+      max-height: 0;
+      max-width: 0;
+      filter: brightness(0) invert(1);
+    }
+  }
+  & input:checked ~ .checkmark {
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","background","backgroundOpacity")};
+    border: 1px solid
+      ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","border")};
+    & .checked {
+      height: ${e=>i(e.theme,e.size)};
+      width: ${e=>i(e.theme,e.size)};
+      stroke: white;
+    }
+    & .indeterminate {
+      height: 0;
+      width: 0;
+    }
+    & img {
+      max-height: ${e=>i(e.theme,e.size)};
+      max-width: ${e=>i(e.theme,e.size)};
+    }
+  }
+  & input:checked ~ .checkbox-label {
+    color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","text")};
+  }
+  & input:indeterminate ~ .checkmark {
+    & .checked {
+      height: 0;
+      width: 0;
+    }
+    background-color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","background","backgroundOpacity")};
+    & .indeterminate {
+      height: ${e=>i(e.theme,e.size)};
+      width: ${e=>i(e.theme,e.size)};
+      stroke: white;
+    }
+  }
+  & input:indeterminate ~ .checkbox-label {
+    color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
+  }
+  & input:disabled ~ .checkmark {
+    ${e=>e.readOnly!==!0&&`background-color: ${o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")};
+    border-color: ${o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")};
+    `};
+  }
+  & input:disabled ~ .checkbox-label {
+    color: ${e=>o.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","text")};
+  }
+  & input:focus ~ .checkmark {
+    ${e=>o.getOutlineCss(e.theme)};
+  }
+  & input:active ~ .checkmark {
+    ${e=>o.getOutlineCss(e.theme)};
+  }
+`,g=z.forwardRef((e,s)=>{const{containerRef:k,id:B,indeterminate:I,disabled:u,readOnly:d,label:a,labelPosition:m="right",spaceBetween:x,customCheckmark:h,onChange:b,onFocus:l,onBlur:c,onClick:y,color:p="primary",size:C="small",className:w="",style:f={},children:L,...$}=e;var P={theme:j.useTheme(),size:C,color:p,disabled:u,readOnly:d};const T=r=>{c&&(c==null||c(r))},v=r=>{l&&(l==null||l(r))};return n.jsxs(O,{ref:k,direction:m,className:w,style:f,label:a,labelPosition:m,spaceBetween:x,tabIndex:-1,readOnly:d,onClick:y,...P,children:[n.jsx("input",{ref:s,type:"checkbox",onBlur:T,onFocus:v,disabled:u||d,onChange:r=>b==null?void 0:b(r),...$}),n.jsxs("div",{className:"checkmark",tabIndex:-1,children:[!h&&n.jsx("svg",{viewBox:"0 0 8 6",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,disabled:!0,tabIndex:-1,className:"checked",children:n.jsx("path",{d:"M1 3.15385L2.89474 5L7 1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",tabIndex:-1})}),n.jsx("svg",{width:"8",height:"2",viewBox:"0 0 8 2",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,disabled:!0,tabIndex:-1,className:"indeterminate",children:n.jsx("path",{d:"M1 1H7",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",tabIndex:-1,title:a})}),h&&n.jsx(n.Fragment,{children:h})]}),a&&n.jsx("div",{className:"checkbox-label",tabIndex:-1,children:a})]})});g.propTypes={containerRef:t.PropTypes.any,id:t.PropTypes.any,defaultChecked:t.PropTypes.bool,checked:t.PropTypes.bool,disabled:t.PropTypes.bool,readOnly:t.PropTypes.bool,label:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),indeterminate:t.PropTypes.bool,labelPosition:t.PropTypes.oneOf(["right","left"]),tabIndex:t.PropTypes.number,spaceBetween:t.PropTypes.bool,customCheckmark:t.PropTypes.element,onChange:t.PropTypes.func,onBlur:t.PropTypes.func,onFocus:t.PropTypes.func,onClick:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=g;

package/dist/CheckBoxInput.js

@@ -0,0 +1,348 @@
+import { jsxs as k, jsx as i, Fragment as B } from "react/jsx-runtime";
+import I from "react";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { n as j } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { f as g, a as L, b as n, c as N, h as x } from "./utils-DEke8iwo.js";
+import { u as P } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const R = (e) => e == "left" ? "row-reverse" : "row", o = (e, d) => `calc(${e.components.Checkbox.default.enabled.sizes[d]} / 2)`, T = j.label`
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  min-height: ${(e) => g(e.theme, e.size)};
+  max-height: ${(e) => g(e.theme, e.size)};
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  flex-direction: ${(e) => R(e.labelPosition)};
+  ${(e) => e.spaceBetween == !0 && "justify-content: space-between;"}
+  width: 100%;
+  ${(e) => e.disabled === !0 && "pointer-events: none;"}
+  ${(e) => L(e.theme, "Checkbox", e.size, "enabled")};
+  gap: 0.75rem;
+  position: relative;
+  & .checkbox-label {
+    ${(e) => !e.disabled && e.readOnly !== !0 && "cursor: pointer;"}
+    min-width: 0;
+    flex-shrink: 1;
+    min-height: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "enabled",
+  "text"
+)};
+  }
+  & input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    z-index: 3;
+  }
+  & input:focus {
+    outline: none;
+    background: transparent;
+  }
+  & input:active {
+    outline: none;
+    background: transparent;
+  }
+  & .checkmark {
+    min-height: ${(e) => e.theme.components.Checkbox.default.enabled.sizes[e.size]};
+    min-width: ${(e) => e.theme.components.Checkbox.default.enabled.sizes[e.size]};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease;
+    background-color: transparent;
+    color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "enabled",
+  "text"
+)};
+    border: 1px solid
+      ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "enabled",
+  "border"
+)};
+    border-radius: ${(e) => N(e.theme, "slight")};
+    ${(e) => e.disabled === !0 && `background-color: ${n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "disabled",
+  "border"
+)}`};
+    & svg {
+      height: 0;
+      width: 0;
+      stroke: transparent;
+    }
+    & img {
+      max-height: 0;
+      max-width: 0;
+      filter: brightness(0) invert(1);
+    }
+  }
+  & input:checked ~ .checkmark {
+    background-color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "active",
+  "background",
+  "backgroundOpacity"
+)};
+    border: 1px solid
+      ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "active",
+  "border"
+)};
+    & .checked {
+      height: ${(e) => o(e.theme, e.size)};
+      width: ${(e) => o(e.theme, e.size)};
+      stroke: white;
+    }
+    & .indeterminate {
+      height: 0;
+      width: 0;
+    }
+    & img {
+      max-height: ${(e) => o(e.theme, e.size)};
+      max-width: ${(e) => o(e.theme, e.size)};
+    }
+  }
+  & input:checked ~ .checkbox-label {
+    color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "active",
+  "text"
+)};
+  }
+  & input:indeterminate ~ .checkmark {
+    & .checked {
+      height: 0;
+      width: 0;
+    }
+    background-color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "active",
+  "background",
+  "backgroundOpacity"
+)};
+    & .indeterminate {
+      height: ${(e) => o(e.theme, e.size)};
+      width: ${(e) => o(e.theme, e.size)};
+      stroke: white;
+    }
+  }
+  & input:indeterminate ~ .checkbox-label {
+    color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "enabled",
+  "text"
+)};
+  }
+  & input:disabled ~ .checkmark {
+    ${(e) => e.readOnly !== !0 && `background-color: ${n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "disabled",
+  "border"
+)};
+    border-color: ${n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "disabled",
+  "border"
+)};
+    `};
+  }
+  & input:disabled ~ .checkbox-label {
+    color: ${(e) => n(
+  e.theme,
+  "Checkbox",
+  e.color,
+  "disabled",
+  "text"
+)};
+  }
+  & input:focus ~ .checkmark {
+    ${(e) => x(e.theme)};
+  }
+  & input:active ~ .checkmark {
+    ${(e) => x(e.theme)};
+  }
+`, F = I.forwardRef((e, d) => {
+  const {
+    containerRef: f,
+    id: W,
+    indeterminate: S,
+    disabled: b,
+    readOnly: h,
+    label: a,
+    labelPosition: u = "right",
+    spaceBetween: w,
+    customCheckmark: s,
+    //----------------
+    onChange: m,
+    onFocus: c,
+    onBlur: l,
+    onClick: $,
+    //----------------
+    color: C = "primary",
+    size: y = "small",
+    className: v = "",
+    style: z = {},
+    children: V,
+    ...O
+  } = e;
+  var p = { theme: P(), size: y, color: C, disabled: b, readOnly: h };
+  return /* @__PURE__ */ k(
+    T,
+    {
+      ref: f,
+      direction: u,
+      className: v,
+      style: z,
+      label: a,
+      labelPosition: u,
+      spaceBetween: w,
+      tabIndex: -1,
+      readOnly: h,
+      onClick: $,
+      ...p,
+      children: [
+        /* @__PURE__ */ i(
+          "input",
+          {
+            ref: d,
+            type: "checkbox",
+            onBlur: (r) => {
+              l && (l == null || l(r));
+            },
+            onFocus: (r) => {
+              c && (c == null || c(r));
+            },
+            disabled: b || h,
+            onChange: (r) => m == null ? void 0 : m(r),
+            ...O
+          }
+        ),
+        /* @__PURE__ */ k("div", { className: "checkmark", tabIndex: -1, children: [
+          !s && /* @__PURE__ */ i(
+            "svg",
+            {
+              viewBox: "0 0 8 6",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": !0,
+              disabled: !0,
+              tabIndex: -1,
+              className: "checked",
+              children: /* @__PURE__ */ i(
+                "path",
+                {
+                  d: "M1 3.15385L2.89474 5L7 1",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  tabIndex: -1
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ i(
+            "svg",
+            {
+              width: "8",
+              height: "2",
+              viewBox: "0 0 8 2",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": !0,
+              disabled: !0,
+              tabIndex: -1,
+              className: "indeterminate",
+              children: /* @__PURE__ */ i(
+                "path",
+                {
+                  d: "M1 1H7",
+                  stroke: "white",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  tabIndex: -1,
+                  title: a
+                }
+              )
+            }
+          ),
+          s && /* @__PURE__ */ i(B, { children: s })
+        ] }),
+        a && /* @__PURE__ */ i("div", { className: "checkbox-label", tabIndex: -1, children: a })
+      ]
+    }
+  );
+});
+F.propTypes = {
+  containerRef: t.any,
+  id: t.any,
+  defaultChecked: t.bool,
+  checked: t.bool,
+  disabled: t.bool,
+  readOnly: t.bool,
+  label: t.oneOfType([t.string, t.element]),
+  /**
+   * Default state indeterminate
+   */
+  indeterminate: t.bool,
+  labelPosition: t.oneOf(["right", "left"]),
+  tabIndex: t.number,
+  spaceBetween: t.bool,
+  customCheckmark: t.element,
+  //---------------------------------------------------------------
+  onChange: t.func,
+  onBlur: t.func,
+  onFocus: t.func,
+  onClick: t.func,
+  //---------------------------------------------------------------
+  className: t.string,
+  style: t.object,
+  size: t.oneOf(["small", "medium", "large"]),
+  color: t.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  F as default
+};

package/dist/Chip.cjs

@@ -0,0 +1,27 @@
+"use strict";const t=require("react/jsx-runtime"),V=require("react"),r=require("./index-DXnSjbfJ.cjs"),j=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./utils-hdRGTsQ7.cjs"),O=require("./Avatar.cjs"),q=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),m=e=>{var o="fas";return`${o} fa-${e} fa-fw`},S=(e,o,l,a)=>e?`padding-right: ${a=="small"?"0.75rem":"0.625rem"}; padding-left: ${a=="small"?"0.25rem":"0.125rem"};`:o?`padding-right: ${a=="small"?"0.5rem":"0.375rem"}; padding-left: ${a=="small"?"0.5rem":"0.375rem"};`:l?`padding-right: ${a=="small"?"0.5rem":"0.375rem"}; padding-left: ${a=="small"?"0.75rem":"0.625rem"};`:`padding-right: ${a=="small"?"1rem":"0.75rem"}; padding-left: ${a=="small"?"1rem":"0.75rem"};`,N=j.newStyled.span`
+  cursor: pointer;
+  display: inline-flex;
+  height: ${e=>n.getSizeValueWithUnits(e.theme,e.size)};
+  ${e=>e.disabled===!0&&n.getDisabledStateCss(e.theme)};
+  background-color: ${e=>!e.disabled&&n.getColorRgbaValue(e.theme,"Chip",e.color,"enabled","background","backgroundOpacity")};
+  color: ${e=>!e.disabled&&n.getColorRgbaValue(e.theme,"Chip",e.color,"enabled","text")};
+  font-weight: ${e=>e.theme.typography.fontWeightBold};
+  ${e=>S(e.avatar,e.leadingIcon,e.trailingIcon,e.size)}
+  gap: 0.375rem;
+  border-radius: ${e=>n.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
+  justify-content: center;
+  align-items: center;
+  ${e=>n.getComponentTypographyCss(e.theme,"Chip",e.size,"enabled")};
+  backdrop-filter: ${e=>n.getComponentPropValue(e.theme,"Chip",e.color,"enabled","backDropFilter")};
+
+  &:hover {
+    background-color: ${e=>!e.disabled&&n.getColorRgbaValue(e.theme,"Chip",e.color,"hover","background","backgroundOpacity")};
+  }
+  &:focus {
+    background-color: ${e=>!e.disabled&&n.getColorRgbaValue(e.theme,"Chip",e.color,"focus","background","backgroundOpacity")};
+    ${e=>!e.disabled&&n.getOutlineCss(e.theme)};
+  }
+  &:active {
+    background-color: ${e=>!e.disabled&&n.getColorRgbaValue(e.theme,"Chip",e.color,"active","background","backgroundOpacity")};
+  }
+`,B=(e,o)=>`calc(${n.getSizeValueWithUnits(e,o)} - 8px)`,b=V.forwardRef((e,o)=>{const{label:l,leadingIcon:a,trailingIcon:i,avatar:s=!1,size:c="small",borderRadius:h="regular",disabled:d=!1,tabIndex:p=0,onFocus:y=()=>{},onBlur:f=()=>{},onClick:C=()=>{},onKeyDown:$=()=>{},onLeadingIconClick:P=()=>{},onTrailingIconClick:T=()=>{},className:k="",style:I={},color:v="primary",avatarProps:x,children:R,...w}=e,g=q.useTheme(),u={theme:g,color:v,style:I,className:"lnc-ui-chip "+k};return t.jsxs(N,{ref:o,size:c,...u,trailingIcon:i,leadingIcon:a,avatar:s,borderRadius:h,disabled:d,tabIndex:p,onClick:C,onKeyDown:$,onBlur:f,onFocus:y,...w,children:[s&&t.jsx(O,{...u,disabled:d,sizeInUnits:B(g,c),...x}),a&&t.jsx("i",{className:m(a),onClick:P}),t.jsxs(t.Fragment,{children:[l,R]}),i&&t.jsx("i",{className:m(i),onClick:T})]})});b.propTypes={label:r.PropTypes.string,leadingIcon:r.PropTypes.string,trailingIcon:r.PropTypes.string,avatar:r.PropTypes.bool,borderRadius:r.PropTypes.oneOf(["slight","regular","edged","curved","none"]),disabled:r.PropTypes.bool,tabIndex:r.PropTypes.number,onBlur:r.PropTypes.func,onFocus:r.PropTypes.func,onClick:r.PropTypes.func,onKeyDown:r.PropTypes.func,onLeadingIconClick:r.PropTypes.func,onTrailingIconClick:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,color:r.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:r.PropTypes.oneOf(["small","medium","large"]),avatarProps:r.PropTypes.any};module.exports=b;

package/dist/Chip.js

@@ -0,0 +1,189 @@
+import { jsxs as u, jsx as i, Fragment as N } from "react/jsx-runtime";
+import S from "react";
+import { P as a } from "./index-Ds9PUTwb.js";
+import { n as j } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { f as b, g as B, b as t, c as D, a as F, d as V, h as U } from "./utils-DEke8iwo.js";
+import W from "./Avatar.js";
+import { u as A } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const h = (e) => {
+  var n = "fas";
+  return `${n} fa-${e} fa-fw`;
+}, K = (e, n, l, r) => e ? `padding-right: ${r == "small" ? "0.75rem" : "0.625rem"}; padding-left: ${r == "small" ? "0.25rem" : "0.125rem"};` : n ? `padding-right: ${r == "small" ? "0.5rem" : "0.375rem"}; padding-left: ${r == "small" ? "0.5rem" : "0.375rem"};` : l ? `padding-right: ${r == "small" ? "0.5rem" : "0.375rem"}; padding-left: ${r == "small" ? "0.75rem" : "0.625rem"};` : `padding-right: ${r == "small" ? "1rem" : "0.75rem"}; padding-left: ${r == "small" ? "1rem" : "0.75rem"};`, L = j.span`
+  cursor: pointer;
+  display: inline-flex;
+  height: ${(e) => b(e.theme, e.size)};
+  ${(e) => e.disabled === !0 && B(e.theme)};
+  background-color: ${(e) => !e.disabled && t(
+  e.theme,
+  "Chip",
+  e.color,
+  "enabled",
+  "background",
+  "backgroundOpacity"
+)};
+  color: ${(e) => !e.disabled && t(e.theme, "Chip", e.color, "enabled", "text")};
+  font-weight: ${(e) => e.theme.typography.fontWeightBold};
+  ${(e) => K(e.avatar, e.leadingIcon, e.trailingIcon, e.size)}
+  gap: 0.375rem;
+  border-radius: ${(e) => D(e.theme, e.borderRadius)};
+  justify-content: center;
+  align-items: center;
+  ${(e) => F(e.theme, "Chip", e.size, "enabled")};
+  backdrop-filter: ${(e) => V(
+  e.theme,
+  "Chip",
+  e.color,
+  "enabled",
+  "backDropFilter"
+)};
+
+  &:hover {
+    background-color: ${(e) => !e.disabled && t(
+  e.theme,
+  "Chip",
+  e.color,
+  "hover",
+  "background",
+  "backgroundOpacity"
+)};
+  }
+  &:focus {
+    background-color: ${(e) => !e.disabled && t(
+  e.theme,
+  "Chip",
+  e.color,
+  "focus",
+  "background",
+  "backgroundOpacity"
+)};
+    ${(e) => !e.disabled && U(e.theme)};
+  }
+  &:active {
+    background-color: ${(e) => !e.disabled && t(
+  e.theme,
+  "Chip",
+  e.color,
+  "active",
+  "background",
+  "backgroundOpacity"
+)};
+  }
+`, _ = (e, n) => `calc(${b(e, n)} - 8px)`, z = S.forwardRef((e, n) => {
+  const {
+    label: l,
+    leadingIcon: r,
+    trailingIcon: o,
+    avatar: c = !1,
+    size: d = "small",
+    borderRadius: f = "regular",
+    disabled: s = !1,
+    tabIndex: y = 0,
+    //----------------
+    onFocus: C = () => {
+    },
+    onBlur: $ = () => {
+    },
+    onClick: k = () => {
+    },
+    onKeyDown: p = () => {
+    },
+    onLeadingIconClick: I = () => {
+    },
+    onTrailingIconClick: v = () => {
+    },
+    //----------------
+    className: x = "",
+    style: O = {},
+    color: w = "primary",
+    avatarProps: P,
+    children: R,
+    ...T
+  } = e, m = A(), g = {
+    theme: m,
+    color: w,
+    style: O,
+    className: "lnc-ui-chip " + x
+  };
+  return /* @__PURE__ */ u(
+    L,
+    {
+      ref: n,
+      size: d,
+      ...g,
+      trailingIcon: o,
+      leadingIcon: r,
+      avatar: c,
+      borderRadius: f,
+      disabled: s,
+      tabIndex: y,
+      onClick: k,
+      onKeyDown: p,
+      onBlur: $,
+      onFocus: C,
+      ...T,
+      children: [
+        c && /* @__PURE__ */ i(
+          W,
+          {
+            ...g,
+            disabled: s,
+            sizeInUnits: _(m, d),
+            ...P
+          }
+        ),
+        r && /* @__PURE__ */ i("i", { className: h(r), onClick: I }),
+        /* @__PURE__ */ u(N, { children: [
+          l,
+          R
+        ] }),
+        o && /* @__PURE__ */ i(
+          "i",
+          {
+            className: h(o),
+            onClick: v
+          }
+        )
+      ]
+    }
+  );
+});
+z.propTypes = {
+  label: a.string,
+  leadingIcon: a.string,
+  trailingIcon: a.string,
+  avatar: a.bool,
+  borderRadius: a.oneOf([
+    "slight",
+    "regular",
+    "edged",
+    "curved",
+    "none"
+  ]),
+  disabled: a.bool,
+  tabIndex: a.number,
+  //---------------------------------------------------------------
+  onBlur: a.func,
+  onFocus: a.func,
+  onClick: a.func,
+  onKeyDown: a.func,
+  onLeadingIconClick: a.func,
+  onTrailingIconClick: a.func,
+  //---------------------------------------------------------------
+  className: a.string,
+  style: a.object,
+  color: a.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  size: a.oneOf(["small", "medium", "large"]),
+  avatarProps: a.any
+};
+export {
+  z as default
+};