@basic-ui/material 0.1.16 → 1.0.0-alpha.2

package/build/esm/CheckBox/CheckPath.js

@@ -1,25 +1,26 @@
 import _styled from "@emotion/styled/base";
 import { jsx as _jsx } from "react/jsx-runtime";
-const offset = 29.78333854675293; // document.querySelector(path).getTotalLength()
+var offset = 29.78333854675293; // document.querySelector(path).getTotalLength()
 
-const Path = _styled("path", process.env.NODE_ENV === "production" ? {
+var Path = _styled("path", process.env.NODE_ENV === "production" ? {
   target: "e1v8gifn0"
 } : {
   target: "e1v8gifn0",
   label: "Path"
-})(props => ({
-  fill: 'none',
-  stroke: 'currentColor',
-  strokeWidth: "0.195rem",
-  strokeDasharray: offset,
-  transition: 'stroke-dashoffset .18s linear',
-  transitionDelay: props.checked ? '90ms' : '0',
-  strokeDashoffset: props.checked ? 0 : offset
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGVja0JveC9DaGVja1BhdGgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUthIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9DaGVja0JveC9DaGVja1BhdGgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5jb25zdCBvZmZzZXQgPSAyOS43ODMzMzg1NDY3NTI5MzsgLy8gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihwYXRoKS5nZXRUb3RhbExlbmd0aCgpXG5cbmNvbnN0IFBhdGggPSBzdHlsZWQucGF0aDx7IGNoZWNrZWQ/OiBib29sZWFuIH0+KChwcm9wcykgPT4gKHtcbiAgZmlsbDogJ25vbmUnLFxuICBzdHJva2U6ICdjdXJyZW50Q29sb3InLFxuICBzdHJva2VXaWR0aDogcmVtKDMuMTIpLFxuICBzdHJva2VEYXNoYXJyYXk6IG9mZnNldCxcbiAgdHJhbnNpdGlvbjogJ3N0cm9rZS1kYXNob2Zmc2V0IC4xOHMgbGluZWFyJyxcbiAgdHJhbnNpdGlvbkRlbGF5OiBwcm9wcy5jaGVja2VkID8gJzkwbXMnIDogJzAnLFxuICBzdHJva2VEYXNob2Zmc2V0OiBwcm9wcy5jaGVja2VkID8gMCA6IG9mZnNldCxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrUGF0aCA9ICh7IGNoZWNrZWQgfTogeyBjaGVja2VkPzogYm9vbGVhbiB9KSA9PiB7XG4gIHJldHVybiA8UGF0aCBkPVwiTTEuNzMsMTIuOTEgOC4xLDE5LjI4IDIyLjc5LDQuNTlcIiBjaGVja2VkPXtjaGVja2VkfSAvPjtcbn07XG4iXX0= */");
+})(function (props) {
+  return {
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: "0.195rem",
+    strokeDasharray: offset,
+    transition: 'stroke-dashoffset .18s linear',
+    transitionDelay: props.checked ? '90ms' : '0',
+    strokeDashoffset: props.checked ? 0 : offset
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGVja0JveC9DaGVja1BhdGgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUthIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9DaGVja0JveC9DaGVja1BhdGgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5jb25zdCBvZmZzZXQgPSAyOS43ODMzMzg1NDY3NTI5MzsgLy8gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihwYXRoKS5nZXRUb3RhbExlbmd0aCgpXG5cbmNvbnN0IFBhdGggPSBzdHlsZWQucGF0aDx7IGNoZWNrZWQ/OiBib29sZWFuIH0+KChwcm9wcykgPT4gKHtcbiAgZmlsbDogJ25vbmUnLFxuICBzdHJva2U6ICdjdXJyZW50Q29sb3InLFxuICBzdHJva2VXaWR0aDogcmVtKDMuMTIpLFxuICBzdHJva2VEYXNoYXJyYXk6IG9mZnNldCxcbiAgdHJhbnNpdGlvbjogJ3N0cm9rZS1kYXNob2Zmc2V0IC4xOHMgbGluZWFyJyxcbiAgdHJhbnNpdGlvbkRlbGF5OiBwcm9wcy5jaGVja2VkID8gJzkwbXMnIDogJzAnLFxuICBzdHJva2VEYXNob2Zmc2V0OiBwcm9wcy5jaGVja2VkID8gMCA6IG9mZnNldCxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrUGF0aCA9ICh7IGNoZWNrZWQgfTogeyBjaGVja2VkPzogYm9vbGVhbiB9KSA9PiB7XG4gIHJldHVybiA8UGF0aCBkPVwiTTEuNzMsMTIuOTEgOC4xLDE5LjI4IDIyLjc5LDQuNTlcIiBjaGVja2VkPXtjaGVja2VkfSAvPjtcbn07XG4iXX0= */");
 
-export const CheckPath = ({
-  checked
-}) => {
+export var CheckPath = function CheckPath(_ref) {
+  var checked = _ref.checked;
   return /*#__PURE__*/_jsx(Path, {
     d: "M1.73,12.91 8.1,19.28 22.79,4.59",
     checked: checked

package/build/esm/CheckBox/CheckPath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/CheckBox/CheckPath.tsx"],"names":["offset","Path","props","fill","stroke","strokeWidth","strokeDasharray","transition","transitionDelay","checked","strokeDashoffset","CheckPath"],"mappings":";;AAGA,MAAMA,MAAM,GAAG,iBAAf,C,CAAkC;;AAElC,MAAMC,IAAI,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,GAAoCC,KAAD,KAAY;AAC1DC,EAAAA,IAAI,EAAE,MADoD;AAE1DC,EAAAA,MAAM,EAAE,cAFkD;AAG1DC,EAAAA,WAAW,YAH+C;AAI1DC,EAAAA,eAAe,EAAEN,MAJyC;AAK1DO,EAAAA,UAAU,EAAE,+BAL8C;AAM1DC,EAAAA,eAAe,EAAEN,KAAK,CAACO,OAAN,GAAgB,MAAhB,GAAyB,GANgB;AAO1DC,EAAAA,gBAAgB,EAAER,KAAK,CAACO,OAAN,GAAgB,CAAhB,GAAoBT;AAPoB,CAAZ,CAAnC,6oCAAb;;AAUA,OAAO,MAAMW,SAAS,GAAG,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAwC;AAC/D,sBAAO,KAAC,IAAD;AAAM,IAAA,CAAC,EAAC,kCAAR;AAA2C,IAAA,OAAO,EAAEA;AAApD,IAAP;AACD,CAFM","sourcesContent":["import styled from '@emotion/styled';\nimport { rem } from 'polished';\n\nconst offset = 29.78333854675293; // document.querySelector(path).getTotalLength()\n\nconst Path = styled.path<{ checked?: boolean }>((props) => ({\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: rem(3.12),\n  strokeDasharray: offset,\n  transition: 'stroke-dashoffset .18s linear',\n  transitionDelay: props.checked ? '90ms' : '0',\n  strokeDashoffset: props.checked ? 0 : offset,\n}));\n\nexport const CheckPath = ({ checked }: { checked?: boolean }) => {\n  return <Path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" checked={checked} />;\n};\n"],"file":"CheckPath.js"}
+{"version":3,"sources":["../../../src/CheckBox/CheckPath.tsx"],"names":["offset","Path","props","fill","stroke","strokeWidth","strokeDasharray","transition","transitionDelay","checked","strokeDashoffset","CheckPath"],"mappings":";;AAGA,IAAMA,MAAM,GAAG,iBAAf,C,CAAkC;;AAElC,IAAMC,IAAI,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,GAAmC,UAACC,KAAD;AAAA,SAAY;AAC1DC,IAAAA,IAAI,EAAE,MADoD;AAE1DC,IAAAA,MAAM,EAAE,cAFkD;AAG1DC,IAAAA,WAAW,YAH+C;AAI1DC,IAAAA,eAAe,EAAEN,MAJyC;AAK1DO,IAAAA,UAAU,EAAE,+BAL8C;AAM1DC,IAAAA,eAAe,EAAEN,KAAK,CAACO,OAAN,GAAgB,MAAhB,GAAyB,GANgB;AAO1DC,IAAAA,gBAAgB,EAAER,KAAK,CAACO,OAAN,GAAgB,CAAhB,GAAoBT;AAPoB,GAAZ;AAAA,CAAnC,6oCAAb;;AAUA,OAAO,IAAMW,SAAS,GAAG,SAAZA,SAAY,OAAwC;AAAA,MAArCF,OAAqC,QAArCA,OAAqC;AAC/D,sBAAO,KAAC,IAAD;AAAM,IAAA,CAAC,EAAC,kCAAR;AAA2C,IAAA,OAAO,EAAEA;AAApD,IAAP;AACD,CAFM","sourcesContent":["import styled from '@emotion/styled';\nimport { rem } from 'polished';\n\nconst offset = 29.78333854675293; // document.querySelector(path).getTotalLength()\n\nconst Path = styled.path<{ checked?: boolean }>((props) => ({\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: rem(3.12),\n  strokeDasharray: offset,\n  transition: 'stroke-dashoffset .18s linear',\n  transitionDelay: props.checked ? '90ms' : '0',\n  strokeDashoffset: props.checked ? 0 : offset,\n}));\n\nexport const CheckPath = ({ checked }: { checked?: boolean }) => {\n  return <Path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" checked={checked} />;\n};\n"],"file":"CheckPath.js"}

package/build/esm/CheckBox/IndeterminatePath.js

@@ -1,24 +1,25 @@
 import _styled from "@emotion/styled/base";
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const Line = _styled("line", process.env.NODE_ENV === "production" ? {
+var Line = _styled("line", process.env.NODE_ENV === "production" ? {
   target: "eat3a050"
 } : {
   target: "eat3a050",
   label: "Line"
-})(props => ({
-  fill: 'none',
-  stroke: 'currentColor',
-  strokeWidth: "0.25rem",
-  transformOrigin: 'center center',
-  transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',
-  transition: 'transform .18s linear',
-  transitionDelay: props.checked ? '90ms' : '0'
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGVja0JveC9JbmRldGVybWluYXRlUGF0aC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2EiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0NoZWNrQm94L0luZGV0ZXJtaW5hdGVQYXRoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuY29uc3QgTGluZSA9IHN0eWxlZC5saW5lPHsgY2hlY2tlZD86IGJvb2xlYW47IHJvdGF0ZT86IGJvb2xlYW4gfT4oKHByb3BzKSA9PiAoe1xuICBmaWxsOiAnbm9uZScsXG4gIHN0cm9rZTogJ2N1cnJlbnRDb2xvcicsXG4gIHN0cm9rZVdpZHRoOiByZW0oNCksXG4gIHRyYW5zZm9ybU9yaWdpbjogJ2NlbnRlciBjZW50ZXInLFxuICB0cmFuc2Zvcm06IHByb3BzLmNoZWNrZWQgPyAnc2NhbGVYKDEpJyA6ICdzY2FsZVgoMCknLFxuICB0cmFuc2l0aW9uOiAndHJhbnNmb3JtIC4xOHMgbGluZWFyJyxcbiAgdHJhbnNpdGlvbkRlbGF5OiBwcm9wcy5jaGVja2VkID8gJzkwbXMnIDogJzAnLFxufSkpO1xuXG5leHBvcnQgY29uc3QgSW5kZXRlcm1pbmF0ZVBhdGggPSAoeyBjaGVja2VkIH06IHsgY2hlY2tlZD86IGJvb2xlYW4gfSkgPT4ge1xuICByZXR1cm4gPExpbmUgeTI9XCIxMlwiIHgyPVwiMjJcIiB5MT1cIjEyXCIgeDE9XCIyXCIgY2hlY2tlZD17Y2hlY2tlZH0gLz47XG59O1xuIl19 */");
+})(function (props) {
+  return {
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: "0.25rem",
+    transformOrigin: 'center center',
+    transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',
+    transition: 'transform .18s linear',
+    transitionDelay: props.checked ? '90ms' : '0'
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9DaGVja0JveC9JbmRldGVybWluYXRlUGF0aC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2EiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0NoZWNrQm94L0luZGV0ZXJtaW5hdGVQYXRoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuY29uc3QgTGluZSA9IHN0eWxlZC5saW5lPHsgY2hlY2tlZD86IGJvb2xlYW47IHJvdGF0ZT86IGJvb2xlYW4gfT4oKHByb3BzKSA9PiAoe1xuICBmaWxsOiAnbm9uZScsXG4gIHN0cm9rZTogJ2N1cnJlbnRDb2xvcicsXG4gIHN0cm9rZVdpZHRoOiByZW0oNCksXG4gIHRyYW5zZm9ybU9yaWdpbjogJ2NlbnRlciBjZW50ZXInLFxuICB0cmFuc2Zvcm06IHByb3BzLmNoZWNrZWQgPyAnc2NhbGVYKDEpJyA6ICdzY2FsZVgoMCknLFxuICB0cmFuc2l0aW9uOiAndHJhbnNmb3JtIC4xOHMgbGluZWFyJyxcbiAgdHJhbnNpdGlvbkRlbGF5OiBwcm9wcy5jaGVja2VkID8gJzkwbXMnIDogJzAnLFxufSkpO1xuXG5leHBvcnQgY29uc3QgSW5kZXRlcm1pbmF0ZVBhdGggPSAoeyBjaGVja2VkIH06IHsgY2hlY2tlZD86IGJvb2xlYW4gfSkgPT4ge1xuICByZXR1cm4gPExpbmUgeTI9XCIxMlwiIHgyPVwiMjJcIiB5MT1cIjEyXCIgeDE9XCIyXCIgY2hlY2tlZD17Y2hlY2tlZH0gLz47XG59O1xuIl19 */");
 
-export const IndeterminatePath = ({
-  checked
-}) => {
+export var IndeterminatePath = function IndeterminatePath(_ref) {
+  var checked = _ref.checked;
   return /*#__PURE__*/_jsx(Line, {
     y2: "12",
     x2: "22",

package/build/esm/CheckBox/IndeterminatePath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/CheckBox/IndeterminatePath.tsx"],"names":["Line","props","fill","stroke","strokeWidth","transformOrigin","transform","checked","transition","transitionDelay","IndeterminatePath"],"mappings":";;;AAGA,MAAMA,IAAI,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,GAAsDC,KAAD,KAAY;AAC5EC,EAAAA,IAAI,EAAE,MADsE;AAE5EC,EAAAA,MAAM,EAAE,cAFoE;AAG5EC,EAAAA,WAAW,WAHiE;AAI5EC,EAAAA,eAAe,EAAE,eAJ2D;AAK5EC,EAAAA,SAAS,EAAEL,KAAK,CAACM,OAAN,GAAgB,WAAhB,GAA8B,WALmC;AAM5EC,EAAAA,UAAU,EAAE,uBANgE;AAO5EC,EAAAA,eAAe,EAAER,KAAK,CAACM,OAAN,GAAgB,MAAhB,GAAyB;AAPkC,CAAZ,CAArD,ylCAAb;;AAUA,OAAO,MAAMG,iBAAiB,GAAG,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAwC;AACvE,sBAAO,KAAC,IAAD;AAAM,IAAA,EAAE,EAAC,IAAT;AAAc,IAAA,EAAE,EAAC,IAAjB;AAAsB,IAAA,EAAE,EAAC,IAAzB;AAA8B,IAAA,EAAE,EAAC,GAAjC;AAAqC,IAAA,OAAO,EAAEA;AAA9C,IAAP;AACD,CAFM","sourcesContent":["import styled from '@emotion/styled';\nimport { rem } from 'polished';\n\nconst Line = styled.line<{ checked?: boolean; rotate?: boolean }>((props) => ({\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: rem(4),\n  transformOrigin: 'center center',\n  transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',\n  transition: 'transform .18s linear',\n  transitionDelay: props.checked ? '90ms' : '0',\n}));\n\nexport const IndeterminatePath = ({ checked }: { checked?: boolean }) => {\n  return <Line y2=\"12\" x2=\"22\" y1=\"12\" x1=\"2\" checked={checked} />;\n};\n"],"file":"IndeterminatePath.js"}
+{"version":3,"sources":["../../../src/CheckBox/IndeterminatePath.tsx"],"names":["Line","props","fill","stroke","strokeWidth","transformOrigin","transform","checked","transition","transitionDelay","IndeterminatePath"],"mappings":";;;AAGA,IAAMA,IAAI,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,GAAqD,UAACC,KAAD;AAAA,SAAY;AAC5EC,IAAAA,IAAI,EAAE,MADsE;AAE5EC,IAAAA,MAAM,EAAE,cAFoE;AAG5EC,IAAAA,WAAW,WAHiE;AAI5EC,IAAAA,eAAe,EAAE,eAJ2D;AAK5EC,IAAAA,SAAS,EAAEL,KAAK,CAACM,OAAN,GAAgB,WAAhB,GAA8B,WALmC;AAM5EC,IAAAA,UAAU,EAAE,uBANgE;AAO5EC,IAAAA,eAAe,EAAER,KAAK,CAACM,OAAN,GAAgB,MAAhB,GAAyB;AAPkC,GAAZ;AAAA,CAArD,ylCAAb;;AAUA,OAAO,IAAMG,iBAAiB,GAAG,SAApBA,iBAAoB,OAAwC;AAAA,MAArCH,OAAqC,QAArCA,OAAqC;AACvE,sBAAO,KAAC,IAAD;AAAM,IAAA,EAAE,EAAC,IAAT;AAAc,IAAA,EAAE,EAAC,IAAjB;AAAsB,IAAA,EAAE,EAAC,IAAzB;AAA8B,IAAA,EAAE,EAAC,GAAjC;AAAqC,IAAA,OAAO,EAAEA;AAA9C,IAAP;AACD,CAFM","sourcesContent":["import styled from '@emotion/styled';\nimport { rem } from 'polished';\n\nconst Line = styled.line<{ checked?: boolean; rotate?: boolean }>((props) => ({\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: rem(4),\n  transformOrigin: 'center center',\n  transform: props.checked ? 'scaleX(1)' : 'scaleX(0)',\n  transition: 'transform .18s linear',\n  transitionDelay: props.checked ? '90ms' : '0',\n}));\n\nexport const IndeterminatePath = ({ checked }: { checked?: boolean }) => {\n  return <Line y2=\"12\" x2=\"22\" y1=\"12\" x1=\"2\" checked={checked} />;\n};\n"],"file":"IndeterminatePath.js"}

package/build/esm/Chip/ButtonChip.d.ts

@@ -1,9 +1,9 @@
-import type * as React from 'react';
-import { ChipBaseProps } from './ChipBase';
+import * as React from 'react';
+import type { ChipBaseProps } from './ChipBase';
 export declare type ButtonChipProps = ChipBaseProps & {
     checked?: boolean;
     disabled?: boolean;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
 };
-export declare const ButtonChip: React.ForwardRefExoticComponent<Pick<ButtonChipProps, "children" | "slot" | "style" | "title" | "translate" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "disabled" | "checked" | "borderOpacity" | "leftIcon" | "rightIcon"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonChip: React.ForwardRefExoticComponent<Pick<ButtonChipProps, "children" | "slot" | "style" | "title" | "translate" | "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "disabled" | "checked" | "leadingIcon" | "trailingIcon" | "borderOpacity"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/Chip/ButtonChip.js

@@ -1,85 +1,69 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
+import * as React from 'react';
 import { ChipBase } from './ChipBase';
 import { RippleBox } from '../Ripple';
 import { useTheme } from '../theme';
-import { Box } from '../Box';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const ButtonChip = /*#__PURE__*/forwardRef(function ButtonChip(props, forwardedRef) {
-  const {
-    as = 'button',
-    onClick,
-    disabled: disabledProp,
-    leftIcon,
-    rightIcon,
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "onClick", "disabled", "leftIcon", "rightIcon", "children"]);
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ButtonChip = /*#__PURE__*/forwardRef(function ButtonChip(props, forwardedRef) {
+  var _props$as = props.as,
+      as = _props$as === void 0 ? 'div' : _props$as,
+      onClick = props.onClick,
+      disabledProp = props.disabled,
+      leadingIcon = props.leadingIcon,
+      trailingIcon = props.trailingIcon,
+      children = props.children,
+      color = props.color,
+      __css = props.__css,
+      otherProps = _objectWithoutProperties(props, ["as", "onClick", "disabled", "leadingIcon", "trailingIcon", "children", "color", "__css"]);
 
-  const theme = useTheme();
-  const isClickable = onClick && !disabledProp;
+  var theme = useTheme();
+  var isClickable = onClick && !disabledProp;
   return /*#__PURE__*/_jsx(ChipBase, _extends({
-    as: "label",
+    as: "div",
     onClick: isClickable ? onClick : undefined,
-    disabled: disabledProp
+    disabled: disabledProp,
+    color: "on.surface",
+    backgroundColor: "surface",
+    __css: __css
   }, otherProps, {
-    children: /*#__PURE__*/_jsxs(Box, {
-      as: "span",
+    children: /*#__PURE__*/_jsxs(RippleBox, {
+      as: as,
+      role: isClickable ? 'button' : undefined,
+      tabIndex: isClickable ? 0 : undefined,
+      theme: theme,
+      ref: forwardedRef,
+      rippleColor: 'currentColor',
+      baseOpacity: 0,
+      hoverOpacity: 0.12,
+      focusOpacity: 0.24,
+      center: false,
+      disabled: !isClickable,
+      "aria-disabled": !isClickable,
       __css: {
+        bg: 'transparent',
+        color: 'inherit',
+        padding: "0",
+        pl: leadingIcon ? "0.5rem" : "0.75rem",
+        pr: trailingIcon ? "0.5rem" : "0.75rem",
+        gap: "0.5rem",
         width: '100%',
+        minWidth: 'auto',
         height: '100%',
+        appearance: 'none',
+        ':focus': {
+          outline: 'none'
+        },
         border: 'none',
+        borderRadius: 0,
+        position: 'relative',
         display: 'inline-flex',
         alignItems: 'center',
-        justifyContent: 'center'
+        cursor: isClickable ? 'pointer' : 'default'
       },
-      children: [/*#__PURE__*/_jsx(RippleBox, {
-        as: as,
-        theme: theme,
-        ref: forwardedRef,
-        rippleColor: 'currentColor',
-        baseOpacity: 0,
-        hoverOpacity: 0.12,
-        focusOpacity: 0.24,
-        center: false,
-        disabled: !isClickable,
-        "aria-disabled": !isClickable,
-        __css: {
-          backgroundColor: 'rgba(0,0,0,0)',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          appearance: 'none',
-          ':focus': {
-            outline: 'none'
-          },
-          border: 'none',
-          borderRadius: 0,
-          position: 'absolute',
-          color: 'inherit',
-          cursor: isClickable ? 'pointer' : 'default'
-        }
-      }), /*#__PURE__*/_jsx(Box, {
-        as: "span",
-        pl: "0.25rem",
-        pr: "0.5rem",
-        children: leftIcon
-      }), /*#__PURE__*/_jsx(Box, {
-        as: "span",
-        __css: {
-          minWidth: 'auto',
-          whiteSpace: 'nowrap'
-        },
-        children: children
-      }), /*#__PURE__*/_jsx(Box, {
-        as: "span",
-        pl: "0.375rem",
-        pr: "0.375rem",
-        children: rightIcon
-      })]
+      children: [leadingIcon, children, trailingIcon]
     })
   }));
 });

package/build/esm/Chip/ButtonChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chip/ButtonChip.tsx"],"names":["forwardRef","ChipBase","RippleBox","useTheme","Box","ButtonChip","props","forwardedRef","as","onClick","disabled","disabledProp","leftIcon","rightIcon","children","otherProps","theme","isClickable","undefined","width","height","border","display","alignItems","justifyContent","backgroundColor","top","left","appearance","outline","borderRadius","position","color","cursor","minWidth","whiteSpace"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAAwBC,QAAxB,QAAwC,YAAxC;AACA,SAASC,SAAT,QAA0B,WAA1B;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,SAASC,GAAT,QAAoB,QAApB;;;AAUA,OAAO,MAAMC,UAAU,gBAAGL,UAAU,CAClC,SAASK,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;AACvC,QAAM;AACJC,IAAAA,EAAE,GAAG,QADD;AAEJC,IAAAA,OAFI;AAGJC,IAAAA,QAAQ,EAAEC,YAHN;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,SALI;AAMJC,IAAAA;AANI,MAQFR,KARJ;AAAA,QAOKS,UAPL,iCAQIT,KARJ;;AAUA,QAAMU,KAAK,GAAGb,QAAQ,EAAtB;AACA,QAAMc,WAAW,GAAGR,OAAO,IAAI,CAACE,YAAhC;AAEA,sBACE,KAAC,QAAD;AACE,IAAA,EAAE,EAAC,OADL;AAEE,IAAA,OAAO,EAAEM,WAAW,GAAGR,OAAH,GAAaS,SAFnC;AAGE,IAAA,QAAQ,EAAEP;AAHZ,KAIMI,UAJN;AAAA,2BAME,MAAC,GAAD;AACE,MAAA,EAAE,EAAC,MADL;AAEE,MAAA,KAAK,EAAE;AACLI,QAAAA,KAAK,EAAE,MADF;AAELC,QAAAA,MAAM,EAAE,MAFH;AAGLC,QAAAA,MAAM,EAAE,MAHH;AAILC,QAAAA,OAAO,EAAE,aAJJ;AAKLC,QAAAA,UAAU,EAAE,QALP;AAMLC,QAAAA,cAAc,EAAE;AANX,OAFT;AAAA,8BAWE,KAAC,SAAD;AACE,QAAA,EAAE,EAAEhB,EADN;AAEE,QAAA,KAAK,EAAEQ,KAFT;AAGE,QAAA,GAAG,EAAET,YAHP;AAIE,QAAA,WAAW,EAAE,cAJf;AAKE,QAAA,WAAW,EAAE,CALf;AAME,QAAA,YAAY,EAAE,IANhB;AAOE,QAAA,YAAY,EAAE,IAPhB;AAQE,QAAA,MAAM,EAAE,KARV;AASE,QAAA,QAAQ,EAAE,CAACU,WATb;AAUE,yBAAe,CAACA,WAVlB;AAWE,QAAA,KAAK,EAAE;AACLQ,UAAAA,eAAe,EAAE,eADZ;AAELC,UAAAA,GAAG,EAAE,CAFA;AAGLC,UAAAA,IAAI,EAAE,CAHD;AAILR,UAAAA,KAAK,EAAE,MAJF;AAKLC,UAAAA,MAAM,EAAE,MALH;AAMLQ,UAAAA,UAAU,EAAE,MANP;AAOL,oBAAU;AACRC,YAAAA,OAAO,EAAE;AADD,WAPL;AAULR,UAAAA,MAAM,EAAE,MAVH;AAWLS,UAAAA,YAAY,EAAE,CAXT;AAYLC,UAAAA,QAAQ,EAAE,UAZL;AAaLC,UAAAA,KAAK,EAAE,SAbF;AAcLC,UAAAA,MAAM,EAAEhB,WAAW,GAAG,SAAH,GAAe;AAd7B;AAXT,QAXF,eAuCE,KAAC,GAAD;AAAK,QAAA,EAAE,EAAC,MAAR;AAAe,QAAA,EAAE,WAAjB;AAA2B,QAAA,EAAE,UAA7B;AAAA,kBACGL;AADH,QAvCF,eA0CE,KAAC,GAAD;AAAK,QAAA,EAAE,EAAC,MAAR;AAAe,QAAA,KAAK,EAAE;AAAEsB,UAAAA,QAAQ,EAAE,MAAZ;AAAoBC,UAAAA,UAAU,EAAE;AAAhC,SAAtB;AAAA,kBACGrB;AADH,QA1CF,eA6CE,KAAC,GAAD;AAAK,QAAA,EAAE,EAAC,MAAR;AAAe,QAAA,EAAE,YAAjB;AAA2B,QAAA,EAAE,YAA7B;AAAA,kBACGD;AADH,QA7CF;AAAA;AANF,KADF;AA0DD,CAzEiC,CAA7B","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { ChipBaseProps, ChipBase } from './ChipBase';\nimport { RippleBox } from '../Ripple';\nimport { useTheme } from '../theme';\nimport { Box } from '../Box';\nimport { rem } from 'polished';\n\nexport type ButtonChipProps = ChipBaseProps & {\n  checked?: boolean;\n  disabled?: boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n};\n\nexport const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(\n  function ButtonChip(props, forwardedRef) {\n    const {\n      as = 'button',\n      onClick,\n      disabled: disabledProp,\n      leftIcon,\n      rightIcon,\n      children,\n      ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const isClickable = onClick && !disabledProp;\n\n    return (\n      <ChipBase\n        as=\"label\"\n        onClick={isClickable ? onClick : undefined}\n        disabled={disabledProp}\n        {...otherProps}\n      >\n        <Box\n          as=\"span\"\n          __css={{\n            width: '100%',\n            height: '100%',\n            border: 'none',\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}\n        >\n          <RippleBox\n            as={as}\n            theme={theme}\n            ref={forwardedRef}\n            rippleColor={'currentColor'}\n            baseOpacity={0}\n            hoverOpacity={0.12}\n            focusOpacity={0.24}\n            center={false}\n            disabled={!isClickable}\n            aria-disabled={!isClickable}\n            __css={{\n              backgroundColor: 'rgba(0,0,0,0)',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: '100%',\n              appearance: 'none',\n              ':focus': {\n                outline: 'none',\n              },\n              border: 'none',\n              borderRadius: 0,\n              position: 'absolute',\n              color: 'inherit',\n              cursor: isClickable ? 'pointer' : 'default',\n            }}\n          />\n          <Box as=\"span\" pl={rem(4)} pr={rem(8)}>\n            {leftIcon}\n          </Box>\n          <Box as=\"span\" __css={{ minWidth: 'auto', whiteSpace: 'nowrap' }}>\n            {children}\n          </Box>\n          <Box as=\"span\" pl={rem(6)} pr={rem(6)}>\n            {rightIcon}\n          </Box>\n        </Box>\n      </ChipBase>\n    );\n  }\n);\n"],"file":"ButtonChip.js"}
+{"version":3,"sources":["../../../src/Chip/ButtonChip.tsx"],"names":["forwardRef","React","ChipBase","RippleBox","useTheme","ButtonChip","props","forwardedRef","as","onClick","disabledProp","disabled","leadingIcon","trailingIcon","children","color","__css","otherProps","theme","isClickable","undefined","bg","padding","pl","pr","gap","width","minWidth","height","appearance","outline","border","borderRadius","position","display","alignItems","cursor"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAIA,SAASC,QAAT,QAAyB,YAAzB;AACA,SAASC,SAAT,QAA0B,WAA1B;AACA,SAASC,QAAT,QAAyB,UAAzB;;;AASA,OAAO,IAAMC,UAAU,gBAAGL,UAAU,CAClC,SAASK,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;AAAA,kBAWnCD,KAXmC,CAErCE,EAFqC;AAAA,MAErCA,EAFqC,0BAEhC,KAFgC;AAAA,MAGrCC,OAHqC,GAWnCH,KAXmC,CAGrCG,OAHqC;AAAA,MAI3BC,YAJ2B,GAWnCJ,KAXmC,CAIrCK,QAJqC;AAAA,MAKrCC,WALqC,GAWnCN,KAXmC,CAKrCM,WALqC;AAAA,MAMrCC,YANqC,GAWnCP,KAXmC,CAMrCO,YANqC;AAAA,MAOrCC,QAPqC,GAWnCR,KAXmC,CAOrCQ,QAPqC;AAAA,MAQrCC,KARqC,GAWnCT,KAXmC,CAQrCS,KARqC;AAAA,MASrCC,KATqC,GAWnCV,KAXmC,CASrCU,KATqC;AAAA,MAUlCC,UAVkC,4BAWnCX,KAXmC;;AAavC,MAAMY,KAAK,GAAGd,QAAQ,EAAtB;AACA,MAAMe,WAAW,GAAGV,OAAO,IAAI,CAACC,YAAhC;AAEA,sBACE,KAAC,QAAD;AACE,IAAA,EAAE,EAAC,KADL;AAEE,IAAA,OAAO,EAAES,WAAW,GAAGV,OAAH,GAAaW,SAFnC;AAGE,IAAA,QAAQ,EAAEV,YAHZ;AAIE,IAAA,KAAK,EAAC,YAJR;AAKE,IAAA,eAAe,EAAC,SALlB;AAME,IAAA,KAAK,EAAEM;AANT,KAOMC,UAPN;AAAA,2BASE,MAAC,SAAD;AACE,MAAA,EAAE,EAAET,EADN;AAEE,MAAA,IAAI,EAAEW,WAAW,GAAG,QAAH,GAAcC,SAFjC;AAGE,MAAA,QAAQ,EAAED,WAAW,GAAG,CAAH,GAAOC,SAH9B;AAIE,MAAA,KAAK,EAAEF,KAJT;AAKE,MAAA,GAAG,EAAEX,YALP;AAME,MAAA,WAAW,EAAE,cANf;AAOE,MAAA,WAAW,EAAE,CAPf;AAQE,MAAA,YAAY,EAAE,IARhB;AASE,MAAA,YAAY,EAAE,IAThB;AAUE,MAAA,MAAM,EAAE,KAVV;AAWE,MAAA,QAAQ,EAAE,CAACY,WAXb;AAYE,uBAAe,CAACA,WAZlB;AAaE,MAAA,KAAK,EAAE;AACLE,QAAAA,EAAE,EAAE,aADC;AAELN,QAAAA,KAAK,EAAE,SAFF;AAGLO,QAAAA,OAAO,KAHF;AAILC,QAAAA,EAAE,EAAEX,WAAW,uBAJV;AAKLY,QAAAA,EAAE,EAAEX,YAAY,uBALX;AAMLY,QAAAA,GAAG,UANE;AAOLC,QAAAA,KAAK,EAAE,MAPF;AAQLC,QAAAA,QAAQ,EAAE,MARL;AASLC,QAAAA,MAAM,EAAE,MATH;AAULC,QAAAA,UAAU,EAAE,MAVP;AAWL,kBAAU;AACRC,UAAAA,OAAO,EAAE;AADD,SAXL;AAcLC,QAAAA,MAAM,EAAE,MAdH;AAeLC,QAAAA,YAAY,EAAE,CAfT;AAgBLC,QAAAA,QAAQ,EAAE,UAhBL;AAiBLC,QAAAA,OAAO,EAAE,aAjBJ;AAkBLC,QAAAA,UAAU,EAAE,QAlBP;AAmBLC,QAAAA,MAAM,EAAEjB,WAAW,GAAG,SAAH,GAAe;AAnB7B,OAbT;AAAA,iBAmCGP,WAnCH,EAoCGE,QApCH,EAqCGD,YArCH;AAAA;AATF,KADF;AAmDD,CApEiC,CAA7B","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\nimport { rem } from 'polished';\n\nimport type { ChipBaseProps } from './ChipBase';\nimport { ChipBase } from './ChipBase';\nimport { RippleBox } from '../Ripple';\nimport { useTheme } from '../theme';\n\nexport type ButtonChipProps = ChipBaseProps & {\n  checked?: boolean;\n  disabled?: boolean;\n  leadingIcon?: React.ReactNode;\n  trailingIcon?: React.ReactNode;\n};\n\nexport const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(\n  function ButtonChip(props, forwardedRef) {\n    const {\n      as = 'div',\n      onClick,\n      disabled: disabledProp,\n      leadingIcon,\n      trailingIcon,\n      children,\n      color,\n      __css,\n      ...otherProps\n    } = props;\n\n    const theme = useTheme();\n    const isClickable = onClick && !disabledProp;\n\n    return (\n      <ChipBase\n        as=\"div\"\n        onClick={isClickable ? onClick : undefined}\n        disabled={disabledProp}\n        color=\"on.surface\"\n        backgroundColor=\"surface\"\n        __css={__css}\n        {...otherProps}\n      >\n        <RippleBox\n          as={as}\n          role={isClickable ? 'button' : undefined}\n          tabIndex={isClickable ? 0 : undefined}\n          theme={theme}\n          ref={forwardedRef}\n          rippleColor={'currentColor'}\n          baseOpacity={0}\n          hoverOpacity={0.12}\n          focusOpacity={0.24}\n          center={false}\n          disabled={!isClickable}\n          aria-disabled={!isClickable}\n          __css={{\n            bg: 'transparent',\n            color: 'inherit',\n            padding: `0`,\n            pl: leadingIcon ? rem(8) : rem(12),\n            pr: trailingIcon ? rem(8) : rem(12),\n            gap: rem(8),\n            width: '100%',\n            minWidth: 'auto',\n            height: '100%',\n            appearance: 'none',\n            ':focus': {\n              outline: 'none',\n            },\n            border: 'none',\n            borderRadius: 0,\n            position: 'relative',\n            display: 'inline-flex',\n            alignItems: 'center',\n            cursor: isClickable ? 'pointer' : 'default',\n          }}\n        >\n          {leadingIcon}\n          {children}\n          {trailingIcon}\n        </RippleBox>\n      </ChipBase>\n    );\n  }\n);\n"],"file":"ButtonChip.js"}

package/build/esm/Chip/ChipBase.d.ts

@@ -1,5 +1,5 @@
-import type * as React from 'react';
-import { BoxProps } from '../Box';
+import * as React from 'react';
+import type { BoxProps } from '../Box';
 export declare type ChipBaseProps<H = HTMLDivElement, Attr = React.HTMLAttributes<H>> = BoxProps<H, Attr> & {
     variant?: 'filled' | 'outlined';
     backgroundColor?: string;

package/build/esm/Chip/ChipBase.js

@@ -1,21 +1,23 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import { forwardRef } from 'react';
+import * as React from 'react';
 import { variant } from 'styled-system';
 import { Box } from '../Box';
 import { useTheme } from '../theme';
-import { alpha } from '../color';
+import { alpha, getDarkThemeBackgroundOverlay, getColorOverlay } from '../color';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-function getFilledCSS(bg, color) {
-  return {
-    bg,
-    color: alpha(color, 0.87),
+function getFilledCSS(theme, bg, color, disabled) {
+  return _extends({}, !disabled && bg !== 'surface' ? {
+    bg: bg
+  } : _extends({}, getColorOverlay(theme, 'surface', 'primary', 0.05)), {
+    color: color,
     '&::before': {
       backgroundColor: 'currentColor',
       position: 'absolute',
       content: '""',
-      opacity: 0.12,
+      opacity: 0,
       pointerEvents: 'none',
       top: 0,
       right: 0,
@@ -28,35 +30,44 @@ function getFilledCSS(bg, color) {
     '& > *': {
       zIndex: 1
     }
-  };
+  }, disabled && {
+    boxShadow: 0,
+    bg: alpha('on.surface', 0.32)
+  });
 }
 
-function getOutlinedCSS(bg, color, borderOpacity) {
-  return {
-    bg,
-    color: alpha(color, 0.87),
+function getOutlinedCSS(theme, bg, color, borderOpacity) {
+  return _extends({}, bg !== 'surface' ? {
+    bg: bg
+  } : getDarkThemeBackgroundOverlay(theme, 2), {
+    color: color,
     borderColor: alpha(color, borderOpacity),
     borderStyle: 'solid',
     borderWidth: "0.0625rem"
-  };
+  });
 }
 
-export const ChipBase = /*#__PURE__*/forwardRef(function Chip(props, forwardedRef) {
-  const {
-    as = 'div',
-    __css,
-    variant: variantProp = 'filled',
-    color: colorProp = 'on.surface',
-    backgroundColor: backgroundColorProp = 'surface',
-    borderOpacity: borderOpacityProp = 0.24,
-    children,
-    disabled = false
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "__css", "variant", "color", "backgroundColor", "borderOpacity", "children", "disabled"]);
+export var ChipBase = /*#__PURE__*/forwardRef(function Chip(props, forwardedRef) {
+  var _props$as = props.as,
+      as = _props$as === void 0 ? 'div' : _props$as,
+      __css = props.__css,
+      _props$variant = props.variant,
+      variantProp = _props$variant === void 0 ? 'filled' : _props$variant,
+      _props$color = props.color,
+      colorProp = _props$color === void 0 ? 'on.surface' : _props$color,
+      _props$backgroundColo = props.backgroundColor,
+      backgroundColorProp = _props$backgroundColo === void 0 ? 'surface' : _props$backgroundColo,
+      _props$borderOpacity = props.borderOpacity,
+      borderOpacityProp = _props$borderOpacity === void 0 ? 0.24 : _props$borderOpacity,
+      children = props.children,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      otherProps = _objectWithoutProperties(props, ["as", "__css", "variant", "color", "backgroundColor", "borderOpacity", "children", "disabled"]);
 
-  const theme = useTheme();
+  var theme = useTheme();
   return /*#__PURE__*/_jsx(Box, _extends({
     as: as,
+    "data-disabled": disabled ? '' : undefined,
     ref: forwardedRef,
     __css: _extends({
       boxSizing: 'border-box',
@@ -70,9 +81,11 @@ export const ChipBase = /*#__PURE__*/forwardRef(function Chip(props, forwardedRe
       fontSize: 'inherit',
       border: 0,
       overflow: 'hidden',
+      whiteSpace: 'nowrap',
       cursor: 'default',
       WebkitTapHighlightColor: 'transparent',
       willChange: 'transform,opacity',
+      minWidth: 'auto',
       '&::-moz-focus-inner': {
         border: 0
       }
@@ -84,9 +97,9 @@ export const ChipBase = /*#__PURE__*/forwardRef(function Chip(props, forwardedRe
       }
     })({
       variant: variantProp,
-      theme
-    }), variantProp === 'filled' ? getFilledCSS(backgroundColorProp, colorProp) : getOutlinedCSS(backgroundColorProp, colorProp, borderOpacityProp), {
-      opacity: disabled ? 0.37 : 1
+      theme: theme
+    }), variantProp === 'filled' ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled) : getOutlinedCSS(theme, backgroundColorProp, colorProp, borderOpacityProp), {
+      opacity: disabled ? 0.38 : 1
     }, __css)
   }, otherProps, {
     children: children

package/build/esm/Chip/ChipBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Chip/ChipBase.tsx"],"names":["forwardRef","variant","Box","useTheme","alpha","getFilledCSS","bg","color","backgroundColor","position","content","opacity","pointerEvents","top","right","bottom","left","width","height","boxSizing","zIndex","getOutlinedCSS","borderOpacity","borderColor","borderStyle","borderWidth","ChipBase","Chip","props","forwardedRef","as","__css","variantProp","colorProp","backgroundColorProp","borderOpacityProp","children","disabled","otherProps","theme","display","alignItems","justifyContent","textAlign","lineHeight","textDecoration","fontSize","border","overflow","cursor","WebkitTapHighlightColor","willChange","scale","prop","variants","text"],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { variant } from 'styled-system';\nimport { Box, BoxProps } from '../Box';\nimport { useTheme } from '../theme';\nimport { alpha } from '../color';\nimport { rem } from 'polished';\n\nexport type ChipBaseProps<\n  H = HTMLDivElement,\n  Attr = React.HTMLAttributes<H>\n> = BoxProps<H, Attr> & {\n  variant?: 'filled' | 'outlined';\n  backgroundColor?: string;\n  color?: string;\n  borderOpacity?: number;\n  disabled?: boolean;\n};\n\nfunction getFilledCSS(bg: string, color: string) {\n  return {\n    bg,\n    color: alpha(color, 0.87),\n    '&::before': {\n      backgroundColor: 'currentColor',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: 0.12,\n      pointerEvents: 'none',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      boxSizing: 'content-box',\n    },\n    '& > *': {\n      zIndex: 1,\n    },\n  };\n}\n\nfunction getOutlinedCSS(bg: string, color: string, borderOpacity: number) {\n  return {\n    bg,\n    color: alpha(color, 0.87),\n    borderColor: alpha(color, borderOpacity),\n    borderStyle: 'solid',\n    borderWidth: rem(1),\n  };\n}\n\nexport const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(\n  props,\n  forwardedRef\n) {\n  const {\n    as = 'div',\n    __css,\n    variant: variantProp = 'filled',\n    color: colorProp = 'on.surface',\n    backgroundColor: backgroundColorProp = 'surface',\n    borderOpacity: borderOpacityProp = 0.24,\n    children,\n    disabled = false,\n    ...otherProps\n  } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      as={as}\n      ref={forwardedRef}\n      __css={{\n        boxSizing: 'border-box',\n        position: 'relative',\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        lineHeight: 'inherit',\n        textDecoration: 'none',\n        fontSize: 'inherit',\n        border: 0,\n        overflow: 'hidden',\n        cursor: 'default',\n        WebkitTapHighlightColor: 'transparent',\n        willChange: 'transform,opacity',\n        '&::-moz-focus-inner': {\n          border: 0,\n        },\n        ...variant({\n          scale: 'chips.variants',\n          prop: 'variant',\n          variants: {\n            text: {},\n          },\n        })({ variant: variantProp, theme }),\n        ...(variantProp === 'filled'\n          ? getFilledCSS(backgroundColorProp, colorProp)\n          : getOutlinedCSS(backgroundColorProp, colorProp, borderOpacityProp)),\n        opacity: disabled ? 0.37 : 1,\n        ...__css,\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"file":"ChipBase.js"}
+{"version":3,"sources":["../../../src/Chip/ChipBase.tsx"],"names":["forwardRef","React","variant","Box","useTheme","alpha","getDarkThemeBackgroundOverlay","getColorOverlay","getFilledCSS","theme","bg","color","disabled","backgroundColor","position","content","opacity","pointerEvents","top","right","bottom","left","width","height","boxSizing","zIndex","boxShadow","getOutlinedCSS","borderOpacity","borderColor","borderStyle","borderWidth","ChipBase","Chip","props","forwardedRef","as","__css","variantProp","colorProp","backgroundColorProp","borderOpacityProp","children","otherProps","undefined","display","alignItems","justifyContent","textAlign","lineHeight","textDecoration","fontSize","border","overflow","whiteSpace","cursor","WebkitTapHighlightColor","willChange","minWidth","scale","prop","variants","text"],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport * as React from 'react';\nimport { variant } from 'styled-system';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport {\n  alpha,\n  getDarkThemeBackgroundOverlay,\n  getColorOverlay,\n} from '../color';\n\nexport type ChipBaseProps<\n  H = HTMLDivElement,\n  Attr = React.HTMLAttributes<H>\n> = BoxProps<H, Attr> & {\n  variant?: 'filled' | 'outlined';\n  backgroundColor?: string;\n  color?: string;\n  borderOpacity?: number;\n  disabled?: boolean;\n};\n\nfunction getFilledCSS(\n  theme: Theme,\n  bg: string,\n  color: string,\n  disabled: boolean\n) {\n  return {\n    ...(!disabled && bg !== 'surface'\n      ? { bg }\n      : {\n          ...getColorOverlay(theme, 'surface', 'primary', 0.05),\n        }),\n    color,\n    '&::before': {\n      backgroundColor: 'currentColor',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: 0,\n      pointerEvents: 'none',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      boxSizing: 'content-box',\n    },\n    '& > *': {\n      zIndex: 1,\n    },\n    ...(disabled && { boxShadow: 0, bg: alpha('on.surface', 0.32) }),\n  };\n}\n\nfunction getOutlinedCSS(\n  theme: Theme,\n  bg: string,\n  color: string,\n  borderOpacity: number\n) {\n  return {\n    ...(bg !== 'surface' ? { bg } : getDarkThemeBackgroundOverlay(theme, 2)),\n    color: color,\n    borderColor: alpha(color, borderOpacity),\n    borderStyle: 'solid',\n    borderWidth: rem(1),\n  };\n}\n\nexport const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function Chip(\n  props,\n  forwardedRef\n) {\n  const {\n    as = 'div',\n    __css,\n    variant: variantProp = 'filled',\n    color: colorProp = 'on.surface',\n    backgroundColor: backgroundColorProp = 'surface',\n    borderOpacity: borderOpacityProp = 0.24,\n    children,\n    disabled = false,\n    ...otherProps\n  } = props;\n  const theme = useTheme();\n\n  return (\n    <Box\n      as={as}\n      data-disabled={disabled ? '' : undefined}\n      ref={forwardedRef}\n      __css={{\n        boxSizing: 'border-box',\n        position: 'relative',\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        lineHeight: 'inherit',\n        textDecoration: 'none',\n        fontSize: 'inherit',\n        border: 0,\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        cursor: 'default',\n        WebkitTapHighlightColor: 'transparent',\n        willChange: 'transform,opacity',\n        minWidth: 'auto',\n        '&::-moz-focus-inner': {\n          border: 0,\n        },\n        ...variant({\n          scale: 'chips.variants',\n          prop: 'variant',\n          variants: {\n            text: {},\n          },\n        })({ variant: variantProp, theme }),\n        ...(variantProp === 'filled'\n          ? getFilledCSS(theme, backgroundColorProp, colorProp, disabled)\n          : getOutlinedCSS(\n              theme,\n              backgroundColorProp,\n              colorProp,\n              borderOpacityProp\n            )),\n        opacity: disabled ? 0.38 : 1,\n        ...__css,\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n});\n"],"file":"ChipBase.js"}

package/build/esm/Chip/ChoiceChip.d.ts

@@ -1,9 +1,10 @@
-import type * as React from 'react';
-import { ChipBaseProps } from './ChipBase';
+import * as React from 'react';
+import type { ChipBaseProps } from './ChipBase';
 export declare type ChoiceChipProps = ChipBaseProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>> & {
     checked?: boolean;
     disabled?: boolean;
     type: 'checkbox' | 'radio';
-    leftIcon?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    trailingIcon?: React.ReactNode;
 };
-export declare const ChoiceChip: React.ForwardRefExoticComponent<Pick<ChoiceChipProps, "value" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "translate" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "multiple" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src" | "borderOpacity" | "leftIcon"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ChoiceChip: React.ForwardRefExoticComponent<Pick<ChoiceChipProps, "children" | "form" | "slot" | "style" | "title" | "pattern" | "translate" | "value" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "list" | "step" | "max" | "min" | "name" | "type" | "crossOrigin" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "multiple" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required" | "src" | "leadingIcon" | "trailingIcon" | "borderOpacity"> & React.RefAttributes<HTMLInputElement>>;