@twilio-paste/select - npm Package Compare versions

Comparing version 9.1.2 to 9.1.3

dist/index.debug.es.js

@@ -35,3 +35,3 @@ var __defProp = Object.defineProperty;
 import * as React from "react";
-import "prop-types";
+import * as PropTypes from "prop-types";
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
@@ -43,22 +43,18 @@ var Option = React.forwardRef((_a, ref) => {
   }
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    __spreadProps(__spreadValues({
-      as: "option",
-      ref
-    }, safelySpreadBoxProps(props)), {
-      element,
-      size: void 0,
-      height: void 0,
-      width: void 0,
-      backgroundColor: "inherit",
-      color: "inherit",
-      fontFamily: "inherit",
-      lineHeight: "lineHeight50",
-      paddingTop: "space30",
-      paddingBottom: "space30",
-      paddingLeft: "space20"
-    }),
-    children
-  );
+  return /* @__PURE__ */ React.createElement(Box, __spreadProps(__spreadValues({
+    as: "option",
+    ref
+  }, safelySpreadBoxProps(props)), {
+    element,
+    size: void 0,
+    height: void 0,
+    width: void 0,
+    backgroundColor: "inherit",
+    color: "inherit",
+    fontFamily: "inherit",
+    lineHeight: "lineHeight50",
+    paddingTop: "space30",
+    paddingBottom: "space30",
+    paddingLeft: "space20"
+  }), children);
 });
@@ -76,26 +72,20 @@ Option.displayName = "Option";
 import * as React2 from "react";
-import "prop-types";
+import * as PropTypes2 from "prop-types";
 import { Box as Box2, safelySpreadBoxProps as safelySpreadBoxProps2 } from "@twilio-paste/box";
-var OptionGroup = React2.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { label, children, element = "OPTION_GROUP" } = _b, props = __objRest(_b, ["label", "children", "element"]);
-    return /* @__PURE__ */ React2.createElement(
-      Box2,
-      __spreadProps(__spreadValues({
-        ref,
-        label
-      }, safelySpreadBoxProps2(props)), {
-        element,
-        as: "optgroup",
-        backgroundColor: "inherit",
-        color: "inherit",
-        fontFamily: "inherit",
-        fontWeight: "fontWeightMedium",
-        fontStyle: "normal",
-        margin: "space20"
-      }),
-      children
-    );
-  }
-);
+var OptionGroup = React2.forwardRef((_a, ref) => {
+  var _b = _a, { label, children, element = "OPTION_GROUP" } = _b, props = __objRest(_b, ["label", "children", "element"]);
+  return /* @__PURE__ */ React2.createElement(Box2, __spreadProps(__spreadValues({
+    ref,
+    label
+  }, safelySpreadBoxProps2(props)), {
+    element,
+    as: "optgroup",
+    backgroundColor: "inherit",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontWeight: "fontWeightMedium",
+    fontStyle: "normal",
+    margin: "space20"
+  }), children);
+});
 OptionGroup.displayName = "OptionGroup";
@@ -112,108 +102,96 @@ if (false) {
 import * as React3 from "react";
-import "prop-types";
+import * as PropTypes3 from "prop-types";
 import { Box as Box3, safelySpreadBoxProps as safelySpreadBoxProps3 } from "@twilio-paste/box";
 import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
 import { InputBox, InputChevronWrapper, getInputChevronIconColor } from "@twilio-paste/input-box";
-var SelectElement = React3.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { element = "SELECT_ELEMENT", variant, size } = _b, props = __objRest(_b, ["element", "variant", "size"]);
-    return /* @__PURE__ */ React3.createElement(
-      Box3,
-      __spreadProps(__spreadValues({}, safelySpreadBoxProps3(props)), {
-        element,
-        as: "select",
-        ref,
-        size,
-        height: void 0,
-        appearance: "none",
-        backgroundColor: "transparent",
-        border: "none",
-        borderRadius: "borderRadius20",
-        boxShadow: "none",
-        color: "inherit",
-        cursor: "pointer",
-        display: "block",
-        fontFamily: "inherit",
-        fontSize: "fontSize30",
-        fontWeight: "fontWeightMedium",
-        lineHeight: "lineHeight20",
-        margin: "space0",
-        outline: "none",
-        paddingBottom: "space30",
-        paddingLeft: "space40",
-        paddingRight: "space100",
-        paddingTop: "space30",
-        resize: "none",
-        width: "100%",
-        _disabled: {
-          color: variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeaker",
-          cursor: "not-allowed",
-          opacity: 1
-        },
-        variant
-      })
-    );
-  }
-);
+var SelectElement = React3.forwardRef((_a, ref) => {
+  var _b = _a, { element = "SELECT_ELEMENT", variant, size } = _b, props = __objRest(_b, ["element", "variant", "size"]);
+  return /* @__PURE__ */ React3.createElement(Box3, __spreadProps(__spreadValues({}, safelySpreadBoxProps3(props)), {
+    element,
+    as: "select",
+    ref,
+    size,
+    height: void 0,
+    appearance: "none",
+    backgroundColor: variant === "inverse" ? "colorBackgroundInverse" : "colorBackgroundBody",
+    border: "none",
+    borderRadius: "borderRadius20",
+    boxShadow: "none",
+    color: "inherit",
+    cursor: "pointer",
+    display: "block",
+    fontFamily: "inherit",
+    fontSize: "fontSize30",
+    fontWeight: "fontWeightMedium",
+    lineHeight: "lineHeight20",
+    margin: "space0",
+    outline: "none",
+    paddingBottom: "space30",
+    paddingLeft: "space40",
+    paddingRight: "space100",
+    paddingTop: "space30",
+    resize: "none",
+    width: "100%",
+    _disabled: {
+      color: variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeaker",
+      cursor: "not-allowed",
+      opacity: 1
+    },
+    variant
+  }));
+});
 SelectElement.displayName = "SelectElement";
-var Select = React3.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      disabled,
-      element = "SELECT",
-      hasError,
-      insertBefore,
-      insertAfter,
-      children,
-      size,
-      multiple,
-      variant = "default"
-    } = _b, props = __objRest(_b, [
-      "disabled",
-      "element",
-      "hasError",
-      "insertBefore",
-      "insertAfter",
-      "children",
-      "size",
-      "multiple",
-      "variant"
-    ]);
-    return /* @__PURE__ */ React3.createElement(
-      InputBox,
-      {
-        disabled,
-        element,
-        hasError,
-        insertAfter,
-        insertBefore,
-        variant
-      },
-      /* @__PURE__ */ React3.createElement(Box3, { display: "flex", width: "100%", position: "relative" }, /* @__PURE__ */ React3.createElement(
-        SelectElement,
-        __spreadProps(__spreadValues({
-          "aria-invalid": hasError,
-          "data-not-selectize": "true",
-          disabled,
-          ref,
-          element: `${element}_ELEMENT`
-        }, props), {
-          multiple,
-          size: multiple ? size : 0,
-          variant
-        }),
-        children
-      ), !multiple && /* @__PURE__ */ React3.createElement(InputChevronWrapper, { element: `${element}_CHEVRON_WRAPPER` }, /* @__PURE__ */ React3.createElement(
-        ChevronDownIcon,
-        {
-          "aria-hidden": "true",
-          decorative: true,
-          element: `${element}_ICON`,
-          color: getInputChevronIconColor(variant, disabled, false),
-          size: "sizeIcon30"
-        }
-      )))
-    );
-  }
-);
+var Select = React3.forwardRef((_a, ref) => {
+  var _b = _a, {
+    disabled,
+    element = "SELECT",
+    hasError,
+    insertBefore,
+    insertAfter,
+    children,
+    size,
+    multiple,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "element",
+    "hasError",
+    "insertBefore",
+    "insertAfter",
+    "children",
+    "size",
+    "multiple",
+    "variant"
+  ]);
+  return /* @__PURE__ */ React3.createElement(InputBox, {
+    disabled,
+    element,
+    hasError,
+    insertAfter,
+    insertBefore,
+    variant
+  }, /* @__PURE__ */ React3.createElement(Box3, {
+    display: "flex",
+    width: "100%",
+    position: "relative"
+  }, /* @__PURE__ */ React3.createElement(SelectElement, __spreadProps(__spreadValues({
+    "aria-invalid": hasError,
+    "data-not-selectize": "true",
+    disabled,
+    ref,
+    element: `${element}_ELEMENT`
+  }, props), {
+    multiple,
+    size: multiple ? size : 0,
+    variant
+  }), children), !multiple && /* @__PURE__ */ React3.createElement(InputChevronWrapper, {
+    element: `${element}_CHEVRON_WRAPPER`
+  }, /* @__PURE__ */ React3.createElement(ChevronDownIcon, {
+    "aria-hidden": "true",
+    decorative: true,
+    element: `${element}_ICON`,
+    color: getInputChevronIconColor(variant, disabled, false),
+    size: "sizeIcon30"
+  }))));
+});
 Select.displayName = "Select";
@@ -220,0 +198,0 @@ if (false) {

dist/index.debug.js

@@ -1,2 +0,1 @@
-"use strict";
 var __create = Object.create;
@@ -49,6 +48,3 @@ var __defProp = Object.defineProperty;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -68,3 +64,3 @@
 var React = __toESM(require("react"));
-var import_prop_types = require("prop-types");
+var PropTypes = __toESM(require("prop-types"));
 var import_box = require("@twilio-paste/box");
@@ -76,22 +72,18 @@ var Option = React.forwardRef((_a, ref) => {
   }
-  return /* @__PURE__ */ React.createElement(
-    import_box.Box,
-    __spreadProps(__spreadValues({
-      as: "option",
-      ref
-    }, (0, import_box.safelySpreadBoxProps)(props)), {
-      element,
-      size: void 0,
-      height: void 0,
-      width: void 0,
-      backgroundColor: "inherit",
-      color: "inherit",
-      fontFamily: "inherit",
-      lineHeight: "lineHeight50",
-      paddingTop: "space30",
-      paddingBottom: "space30",
-      paddingLeft: "space20"
-    }),
-    children
-  );
+  return /* @__PURE__ */ React.createElement(import_box.Box, __spreadProps(__spreadValues({
+    as: "option",
+    ref
+  }, (0, import_box.safelySpreadBoxProps)(props)), {
+    element,
+    size: void 0,
+    height: void 0,
+    width: void 0,
+    backgroundColor: "inherit",
+    color: "inherit",
+    fontFamily: "inherit",
+    lineHeight: "lineHeight50",
+    paddingTop: "space30",
+    paddingBottom: "space30",
+    paddingLeft: "space20"
+  }), children);
 });
@@ -109,26 +101,20 @@ Option.displayName = "Option";
 var React2 = __toESM(require("react"));
-var import_prop_types2 = require("prop-types");
+var PropTypes2 = __toESM(require("prop-types"));
 var import_box2 = require("@twilio-paste/box");
-var OptionGroup = React2.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { label, children, element = "OPTION_GROUP" } = _b, props = __objRest(_b, ["label", "children", "element"]);
-    return /* @__PURE__ */ React2.createElement(
-      import_box2.Box,
-      __spreadProps(__spreadValues({
-        ref,
-        label
-      }, (0, import_box2.safelySpreadBoxProps)(props)), {
-        element,
-        as: "optgroup",
-        backgroundColor: "inherit",
-        color: "inherit",
-        fontFamily: "inherit",
-        fontWeight: "fontWeightMedium",
-        fontStyle: "normal",
-        margin: "space20"
-      }),
-      children
-    );
-  }
-);
+var OptionGroup = React2.forwardRef((_a, ref) => {
+  var _b = _a, { label, children, element = "OPTION_GROUP" } = _b, props = __objRest(_b, ["label", "children", "element"]);
+  return /* @__PURE__ */ React2.createElement(import_box2.Box, __spreadProps(__spreadValues({
+    ref,
+    label
+  }, (0, import_box2.safelySpreadBoxProps)(props)), {
+    element,
+    as: "optgroup",
+    backgroundColor: "inherit",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontWeight: "fontWeightMedium",
+    fontStyle: "normal",
+    margin: "space20"
+  }), children);
+});
 OptionGroup.displayName = "OptionGroup";
@@ -145,108 +131,96 @@ if (false) {
 var React3 = __toESM(require("react"));
-var import_prop_types3 = require("prop-types");
+var PropTypes3 = __toESM(require("prop-types"));
 var import_box3 = require("@twilio-paste/box");
 var import_ChevronDownIcon = require("@twilio-paste/icons/cjs/ChevronDownIcon");
 var import_input_box = require("@twilio-paste/input-box");
-var SelectElement = React3.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { element = "SELECT_ELEMENT", variant, size } = _b, props = __objRest(_b, ["element", "variant", "size"]);
-    return /* @__PURE__ */ React3.createElement(
-      import_box3.Box,
-      __spreadProps(__spreadValues({}, (0, import_box3.safelySpreadBoxProps)(props)), {
-        element,
-        as: "select",
-        ref,
-        size,
-        height: void 0,
-        appearance: "none",
-        backgroundColor: "transparent",
-        border: "none",
-        borderRadius: "borderRadius20",
-        boxShadow: "none",
-        color: "inherit",
-        cursor: "pointer",
-        display: "block",
-        fontFamily: "inherit",
-        fontSize: "fontSize30",
-        fontWeight: "fontWeightMedium",
-        lineHeight: "lineHeight20",
-        margin: "space0",
-        outline: "none",
-        paddingBottom: "space30",
-        paddingLeft: "space40",
-        paddingRight: "space100",
-        paddingTop: "space30",
-        resize: "none",
-        width: "100%",
-        _disabled: {
-          color: variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeaker",
-          cursor: "not-allowed",
-          opacity: 1
-        },
-        variant
-      })
-    );
-  }
-);
+var SelectElement = React3.forwardRef((_a, ref) => {
+  var _b = _a, { element = "SELECT_ELEMENT", variant, size } = _b, props = __objRest(_b, ["element", "variant", "size"]);
+  return /* @__PURE__ */ React3.createElement(import_box3.Box, __spreadProps(__spreadValues({}, (0, import_box3.safelySpreadBoxProps)(props)), {
+    element,
+    as: "select",
+    ref,
+    size,
+    height: void 0,
+    appearance: "none",
+    backgroundColor: variant === "inverse" ? "colorBackgroundInverse" : "colorBackgroundBody",
+    border: "none",
+    borderRadius: "borderRadius20",
+    boxShadow: "none",
+    color: "inherit",
+    cursor: "pointer",
+    display: "block",
+    fontFamily: "inherit",
+    fontSize: "fontSize30",
+    fontWeight: "fontWeightMedium",
+    lineHeight: "lineHeight20",
+    margin: "space0",
+    outline: "none",
+    paddingBottom: "space30",
+    paddingLeft: "space40",
+    paddingRight: "space100",
+    paddingTop: "space30",
+    resize: "none",
+    width: "100%",
+    _disabled: {
+      color: variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeaker",
+      cursor: "not-allowed",
+      opacity: 1
+    },
+    variant
+  }));
+});
 SelectElement.displayName = "SelectElement";
-var Select = React3.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      disabled,
-      element = "SELECT",
-      hasError,
-      insertBefore,
-      insertAfter,
-      children,
-      size,
-      multiple,
-      variant = "default"
-    } = _b, props = __objRest(_b, [
-      "disabled",
-      "element",
-      "hasError",
-      "insertBefore",
-      "insertAfter",
-      "children",
-      "size",
-      "multiple",
-      "variant"
-    ]);
-    return /* @__PURE__ */ React3.createElement(
-      import_input_box.InputBox,
-      {
-        disabled,
-        element,
-        hasError,
-        insertAfter,
-        insertBefore,
-        variant
-      },
-      /* @__PURE__ */ React3.createElement(import_box3.Box, { display: "flex", width: "100%", position: "relative" }, /* @__PURE__ */ React3.createElement(
-        SelectElement,
-        __spreadProps(__spreadValues({
-          "aria-invalid": hasError,
-          "data-not-selectize": "true",
-          disabled,
-          ref,
-          element: `${element}_ELEMENT`
-        }, props), {
-          multiple,
-          size: multiple ? size : 0,
-          variant
-        }),
-        children
-      ), !multiple && /* @__PURE__ */ React3.createElement(import_input_box.InputChevronWrapper, { element: `${element}_CHEVRON_WRAPPER` }, /* @__PURE__ */ React3.createElement(
-        import_ChevronDownIcon.ChevronDownIcon,
-        {
-          "aria-hidden": "true",
-          decorative: true,
-          element: `${element}_ICON`,
-          color: (0, import_input_box.getInputChevronIconColor)(variant, disabled, false),
-          size: "sizeIcon30"
-        }
-      )))
-    );
-  }
-);
+var Select = React3.forwardRef((_a, ref) => {
+  var _b = _a, {
+    disabled,
+    element = "SELECT",
+    hasError,
+    insertBefore,
+    insertAfter,
+    children,
+    size,
+    multiple,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "element",
+    "hasError",
+    "insertBefore",
+    "insertAfter",
+    "children",
+    "size",
+    "multiple",
+    "variant"
+  ]);
+  return /* @__PURE__ */ React3.createElement(import_input_box.InputBox, {
+    disabled,
+    element,
+    hasError,
+    insertAfter,
+    insertBefore,
+    variant
+  }, /* @__PURE__ */ React3.createElement(import_box3.Box, {
+    display: "flex",
+    width: "100%",
+    position: "relative"
+  }, /* @__PURE__ */ React3.createElement(SelectElement, __spreadProps(__spreadValues({
+    "aria-invalid": hasError,
+    "data-not-selectize": "true",
+    disabled,
+    ref,
+    element: `${element}_ELEMENT`
+  }, props), {
+    multiple,
+    size: multiple ? size : 0,
+    variant
+  }), children), !multiple && /* @__PURE__ */ React3.createElement(import_input_box.InputChevronWrapper, {
+    element: `${element}_CHEVRON_WRAPPER`
+  }, /* @__PURE__ */ React3.createElement(import_ChevronDownIcon.ChevronDownIcon, {
+    "aria-hidden": "true",
+    decorative: true,
+    element: `${element}_ICON`,
+    color: (0, import_input_box.getInputChevronIconColor)(variant, disabled, false),
+    size: "sizeIcon30"
+  }))));
+});
 Select.displayName = "Select";
@@ -253,0 +227,0 @@ if (false) {

dist/index.es.js

@@ -1,1 +0,1 @@
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React from"react";import"prop-types";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";var Option=React.forwardRef((_a,ref)=>{var _b=_a,{children,element="OPTION"}=_b,props=__objRest(_b,["children","element"]);return props.selected&&console.warn('"selected" is a blocked prop on this component, please use "value" on the select element.'),React.createElement(Box,__spreadProps(__spreadValues({as:"option",ref},safelySpreadBoxProps(props)),{element,size:void 0,height:void 0,width:void 0,backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",lineHeight:"lineHeight50",paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space20"}),children)});Option.displayName="Option";import*as React2 from"react";import"prop-types";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";var OptionGroup=React2.forwardRef((_a,ref)=>{var _b=_a,{label,children,element="OPTION_GROUP"}=_b,props=__objRest(_b,["label","children","element"]);return React2.createElement(Box2,__spreadProps(__spreadValues({ref,label},safelySpreadBoxProps2(props)),{element,as:"optgroup",backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",fontWeight:"fontWeightMedium",fontStyle:"normal",margin:"space20"}),children)});OptionGroup.displayName="OptionGroup";import*as React3 from"react";import"prop-types";import{Box as Box3,safelySpreadBoxProps as safelySpreadBoxProps3}from"@twilio-paste/box";import{ChevronDownIcon}from"@twilio-paste/icons/esm/ChevronDownIcon";import{InputBox,InputChevronWrapper,getInputChevronIconColor}from"@twilio-paste/input-box";var SelectElement=React3.forwardRef((_a,ref)=>{var _b=_a,{element="SELECT_ELEMENT",variant,size}=_b,props=__objRest(_b,["element","variant","size"]);return React3.createElement(Box3,__spreadProps(__spreadValues({},safelySpreadBoxProps3(props)),{element,as:"select",ref,size,height:void 0,appearance:"none",backgroundColor:"transparent",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:"pointer",display:"block",fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space100",paddingTop:"space30",resize:"none",width:"100%",_disabled:{color:variant==="inverse"?"colorTextInverseWeaker":"colorTextWeaker",cursor:"not-allowed",opacity:1},variant}))});SelectElement.displayName="SelectElement";var Select=React3.forwardRef((_a,ref)=>{var _b=_a,{disabled,element="SELECT",hasError,insertBefore,insertAfter,children,size,multiple,variant="default"}=_b,props=__objRest(_b,["disabled","element","hasError","insertBefore","insertAfter","children","size","multiple","variant"]);return React3.createElement(InputBox,{disabled,element,hasError,insertAfter,insertBefore,variant},React3.createElement(Box3,{display:"flex",width:"100%",position:"relative"},React3.createElement(SelectElement,__spreadProps(__spreadValues({"aria-invalid":hasError,"data-not-selectize":"true",disabled,ref,element:`${element}_ELEMENT`},props),{multiple,size:multiple?size:0,variant}),children),!multiple&&React3.createElement(InputChevronWrapper,{element:`${element}_CHEVRON_WRAPPER`},React3.createElement(ChevronDownIcon,{"aria-hidden":"true",decorative:!0,element:`${element}_ICON`,color:getInputChevronIconColor(variant,disabled,!1),size:"sizeIcon30"}))))});Select.displayName="Select";export{Option,OptionGroup,Select,SelectElement};
+var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React from"react";import*as PropTypes from"prop-types";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";var Option=React.forwardRef((_a,ref)=>{var _b=_a,{children,element="OPTION"}=_b,props=__objRest(_b,["children","element"]);return props.selected&&console.warn('"selected" is a blocked prop on this component, please use "value" on the select element.'),React.createElement(Box,__spreadProps(__spreadValues({as:"option",ref},safelySpreadBoxProps(props)),{element,size:void 0,height:void 0,width:void 0,backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",lineHeight:"lineHeight50",paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space20"}),children)});Option.displayName="Option";import*as React2 from"react";import*as PropTypes2 from"prop-types";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";var OptionGroup=React2.forwardRef((_a,ref)=>{var _b=_a,{label,children,element="OPTION_GROUP"}=_b,props=__objRest(_b,["label","children","element"]);return React2.createElement(Box2,__spreadProps(__spreadValues({ref,label},safelySpreadBoxProps2(props)),{element,as:"optgroup",backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",fontWeight:"fontWeightMedium",fontStyle:"normal",margin:"space20"}),children)});OptionGroup.displayName="OptionGroup";import*as React3 from"react";import*as PropTypes3 from"prop-types";import{Box as Box3,safelySpreadBoxProps as safelySpreadBoxProps3}from"@twilio-paste/box";import{ChevronDownIcon}from"@twilio-paste/icons/esm/ChevronDownIcon";import{InputBox,InputChevronWrapper,getInputChevronIconColor}from"@twilio-paste/input-box";var SelectElement=React3.forwardRef((_a,ref)=>{var _b=_a,{element="SELECT_ELEMENT",variant,size}=_b,props=__objRest(_b,["element","variant","size"]);return React3.createElement(Box3,__spreadProps(__spreadValues({},safelySpreadBoxProps3(props)),{element,as:"select",ref,size,height:void 0,appearance:"none",backgroundColor:variant==="inverse"?"colorBackgroundInverse":"colorBackgroundBody",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:"pointer",display:"block",fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space100",paddingTop:"space30",resize:"none",width:"100%",_disabled:{color:variant==="inverse"?"colorTextInverseWeaker":"colorTextWeaker",cursor:"not-allowed",opacity:1},variant}))});SelectElement.displayName="SelectElement";var Select=React3.forwardRef((_a,ref)=>{var _b=_a,{disabled,element="SELECT",hasError,insertBefore,insertAfter,children,size,multiple,variant="default"}=_b,props=__objRest(_b,["disabled","element","hasError","insertBefore","insertAfter","children","size","multiple","variant"]);return React3.createElement(InputBox,{disabled,element,hasError,insertAfter,insertBefore,variant},React3.createElement(Box3,{display:"flex",width:"100%",position:"relative"},React3.createElement(SelectElement,__spreadProps(__spreadValues({"aria-invalid":hasError,"data-not-selectize":"true",disabled,ref,element:`${element}_ELEMENT`},props),{multiple,size:multiple?size:0,variant}),children),!multiple&&React3.createElement(InputChevronWrapper,{element:`${element}_CHEVRON_WRAPPER`},React3.createElement(ChevronDownIcon,{"aria-hidden":"true",decorative:!0,element:`${element}_ICON`,color:getInputChevronIconColor(variant,disabled,!1),size:"sizeIcon30"}))))});Select.displayName="Select";export{Option,OptionGroup,Select,SelectElement};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Option:()=>Option,OptionGroup:()=>OptionGroup,Select:()=>Select,SelectElement:()=>SelectElement});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),import_prop_types=require("prop-types"),import_box=require("@twilio-paste/box");var Option=React.forwardRef((_a,ref)=>{var _b=_a,{children,element="OPTION"}=_b,props=__objRest(_b,["children","element"]);return props.selected&&console.warn('"selected" is a blocked prop on this component, please use "value" on the select element.'),React.createElement(import_box.Box,__spreadProps(__spreadValues({as:"option",ref},(0,import_box.safelySpreadBoxProps)(props)),{element,size:void 0,height:void 0,width:void 0,backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",lineHeight:"lineHeight50",paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space20"}),children)});Option.displayName="Option";var React2=__toESM(require("react")),import_prop_types2=require("prop-types"),import_box2=require("@twilio-paste/box");var OptionGroup=React2.forwardRef((_a,ref)=>{var _b=_a,{label,children,element="OPTION_GROUP"}=_b,props=__objRest(_b,["label","children","element"]);return React2.createElement(import_box2.Box,__spreadProps(__spreadValues({ref,label},(0,import_box2.safelySpreadBoxProps)(props)),{element,as:"optgroup",backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",fontWeight:"fontWeightMedium",fontStyle:"normal",margin:"space20"}),children)});OptionGroup.displayName="OptionGroup";var React3=__toESM(require("react")),import_prop_types3=require("prop-types"),import_box3=require("@twilio-paste/box"),import_ChevronDownIcon=require("@twilio-paste/icons/cjs/ChevronDownIcon"),import_input_box=require("@twilio-paste/input-box");var SelectElement=React3.forwardRef((_a,ref)=>{var _b=_a,{element="SELECT_ELEMENT",variant,size}=_b,props=__objRest(_b,["element","variant","size"]);return React3.createElement(import_box3.Box,__spreadProps(__spreadValues({},(0,import_box3.safelySpreadBoxProps)(props)),{element,as:"select",ref,size,height:void 0,appearance:"none",backgroundColor:"transparent",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:"pointer",display:"block",fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space100",paddingTop:"space30",resize:"none",width:"100%",_disabled:{color:variant==="inverse"?"colorTextInverseWeaker":"colorTextWeaker",cursor:"not-allowed",opacity:1},variant}))});SelectElement.displayName="SelectElement";var Select=React3.forwardRef((_a,ref)=>{var _b=_a,{disabled,element="SELECT",hasError,insertBefore,insertAfter,children,size,multiple,variant="default"}=_b,props=__objRest(_b,["disabled","element","hasError","insertBefore","insertAfter","children","size","multiple","variant"]);return React3.createElement(import_input_box.InputBox,{disabled,element,hasError,insertAfter,insertBefore,variant},React3.createElement(import_box3.Box,{display:"flex",width:"100%",position:"relative"},React3.createElement(SelectElement,__spreadProps(__spreadValues({"aria-invalid":hasError,"data-not-selectize":"true",disabled,ref,element:`${element}_ELEMENT`},props),{multiple,size:multiple?size:0,variant}),children),!multiple&&React3.createElement(import_input_box.InputChevronWrapper,{element:`${element}_CHEVRON_WRAPPER`},React3.createElement(import_ChevronDownIcon.ChevronDownIcon,{"aria-hidden":"true",decorative:!0,element:`${element}_ICON`,color:(0,import_input_box.getInputChevronIconColor)(variant,disabled,!1),size:"sizeIcon30"}))))});Select.displayName="Select";0&&(module.exports={Option,OptionGroup,Select,SelectElement});
+var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Option:()=>Option,OptionGroup:()=>OptionGroup,Select:()=>Select,SelectElement:()=>SelectElement});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),PropTypes=__toESM(require("prop-types")),import_box=require("@twilio-paste/box"),Option=React.forwardRef((_a,ref)=>{var _b=_a,{children,element="OPTION"}=_b,props=__objRest(_b,["children","element"]);return props.selected&&console.warn('"selected" is a blocked prop on this component, please use "value" on the select element.'),React.createElement(import_box.Box,__spreadProps(__spreadValues({as:"option",ref},(0,import_box.safelySpreadBoxProps)(props)),{element,size:void 0,height:void 0,width:void 0,backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",lineHeight:"lineHeight50",paddingTop:"space30",paddingBottom:"space30",paddingLeft:"space20"}),children)});Option.displayName="Option";var React2=__toESM(require("react")),PropTypes2=__toESM(require("prop-types")),import_box2=require("@twilio-paste/box"),OptionGroup=React2.forwardRef((_a,ref)=>{var _b=_a,{label,children,element="OPTION_GROUP"}=_b,props=__objRest(_b,["label","children","element"]);return React2.createElement(import_box2.Box,__spreadProps(__spreadValues({ref,label},(0,import_box2.safelySpreadBoxProps)(props)),{element,as:"optgroup",backgroundColor:"inherit",color:"inherit",fontFamily:"inherit",fontWeight:"fontWeightMedium",fontStyle:"normal",margin:"space20"}),children)});OptionGroup.displayName="OptionGroup";var React3=__toESM(require("react")),PropTypes3=__toESM(require("prop-types")),import_box3=require("@twilio-paste/box"),import_ChevronDownIcon=require("@twilio-paste/icons/cjs/ChevronDownIcon"),import_input_box=require("@twilio-paste/input-box"),SelectElement=React3.forwardRef((_a,ref)=>{var _b=_a,{element="SELECT_ELEMENT",variant,size}=_b,props=__objRest(_b,["element","variant","size"]);return React3.createElement(import_box3.Box,__spreadProps(__spreadValues({},(0,import_box3.safelySpreadBoxProps)(props)),{element,as:"select",ref,size,height:void 0,appearance:"none",backgroundColor:variant==="inverse"?"colorBackgroundInverse":"colorBackgroundBody",border:"none",borderRadius:"borderRadius20",boxShadow:"none",color:"inherit",cursor:"pointer",display:"block",fontFamily:"inherit",fontSize:"fontSize30",fontWeight:"fontWeightMedium",lineHeight:"lineHeight20",margin:"space0",outline:"none",paddingBottom:"space30",paddingLeft:"space40",paddingRight:"space100",paddingTop:"space30",resize:"none",width:"100%",_disabled:{color:variant==="inverse"?"colorTextInverseWeaker":"colorTextWeaker",cursor:"not-allowed",opacity:1},variant}))});SelectElement.displayName="SelectElement";var Select=React3.forwardRef((_a,ref)=>{var _b=_a,{disabled,element="SELECT",hasError,insertBefore,insertAfter,children,size,multiple,variant="default"}=_b,props=__objRest(_b,["disabled","element","hasError","insertBefore","insertAfter","children","size","multiple","variant"]);return React3.createElement(import_input_box.InputBox,{disabled,element,hasError,insertAfter,insertBefore,variant},React3.createElement(import_box3.Box,{display:"flex",width:"100%",position:"relative"},React3.createElement(SelectElement,__spreadProps(__spreadValues({"aria-invalid":hasError,"data-not-selectize":"true",disabled,ref,element:`${element}_ELEMENT`},props),{multiple,size:multiple?size:0,variant}),children),!multiple&&React3.createElement(import_input_box.InputChevronWrapper,{element:`${element}_CHEVRON_WRAPPER`},React3.createElement(import_ChevronDownIcon.ChevronDownIcon,{"aria-hidden":"true",decorative:!0,element:`${element}_ICON`,color:(0,import_input_box.getInputChevronIconColor)(variant,disabled,!1),size:"sizeIcon30"}))))});Select.displayName="Select";0&&(module.exports={Option,OptionGroup,Select,SelectElement});

dist/types.d.ts

 import type { BoxElementProps } from '@twilio-paste/box';
-export type Element = BoxElementProps['element'];
-export type Variants = 'default' | 'inverse';
+export declare type Element = BoxElementProps['element'];
+export declare type Variants = 'default' | 'inverse';
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@twilio-paste/select",
-  "version": "9.1.2",
+  "version": "9.1.3",
   "category": "user input",
@@ -42,11 +42,11 @@ "status": "production",
   "devDependencies": {
-    "@twilio-paste/box": "^7.1.2",
-    "@twilio-paste/design-tokens": "^8.3.0",
-    "@twilio-paste/icons": "^9.3.1",
-    "@twilio-paste/input-box": "^7.1.3",
-    "@twilio-paste/style-props": "^6.1.2",
-    "@twilio-paste/styling-library": "^1.0.3",
-    "@twilio-paste/theme": "^8.0.3",
-    "@twilio-paste/types": "^3.1.9",
-    "@twilio-paste/uid-library": "^0.2.6",
+    "@twilio-paste/box": "^7.0.1",
+    "@twilio-paste/design-tokens": "^8.1.0",
+    "@twilio-paste/icons": "^9.0.0",
+    "@twilio-paste/input-box": "^7.1.0",
+    "@twilio-paste/style-props": "^6.0.0",
+    "@twilio-paste/styling-library": "^1.0.2",
+    "@twilio-paste/theme": "^8.0.1",
+    "@twilio-paste/types": "^3.1.8",
+    "@twilio-paste/uid-library": "^0.2.5",
     "prop-types": "^15.7.2",
@@ -53,0 +53,0 @@ "react": "^17.0.2",

No alert changes

Worsened metrics

Total package byte prevSize

108368

decreased by-2.56%

Lines of code

516

decreased by-8.51%

No dependency changes