@contentful/f36-inputs - npm Package Compare versions

Comparing version 4.0.1-next-v4-5860.2171 to 4.0.1-next-v4-6174.2195

dist/main.js

@@ -1,2 +0,2 @@
-var e=h(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),r=require("react"),n=h(r),{useEffect:i,useRef:a,useCallback:l}=r,{Minus:c,Done:s}=require("@contentful/f36-icons"),{Box:d}=require("@contentful/f36-core"),u=h(require("@contentful/f36-tokens"));function b(e,t){return Object.keys(t).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[o]}})})),e}function g(e,t,o,r){Object.defineProperty(e,t,{get:o,set:r,enumerable:!0,configurable:!0})}function h(e){return e&&e.__esModule?e.default:e}var f={},p={};g(p,"ControlledInput",(()=>y));const m={container:o({position:"relative",textOverflow:"ellipsis",lineHeight:u.lineHeightL,margin:"0",width:u.spacingM,height:u.spacingM,minHeight:u.spacingM,overflow:"visible"},""),input:o({display:"inline-block",fontSize:u.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:u.spacingM,height:u.spacingM,zIndex:u.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:u.glowPrimary},"&:checked + label":{borderColor:u.blue600,background:u.blue600},"&:disabled + label":{borderColor:u.gray300,background:u.gray300}},""),inputDisabled:o({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:o({"&:checked":{"& + label::before":{background:u.colorWhite},"&:disabled + label::before":{background:u.gray600}},"&:disabled + label::before":{background:u.gray300}},""),inputCheckbox:o({"&:checked, &:indeterminate":{"& + label":{borderColor:u.blue600,background:u.blue600},"&:disabled + label svg":{fill:u.gray600}},"&:disabled":{"& + label":{borderColor:u.gray300,background:u.gray300,"& svg":{fill:u.gray300}}}},""),ghost:o({background:u.colorWhite,width:u.spacingM,height:u.spacingM,border:`2px solid ${u.gray300}`,fill:u.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:o({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:u.colorWhite,width:u.borderRadiusMedium,height:u.borderRadiusMedium}},""),ghostCheckbox:o({borderRadius:"20%",svg:{width:u.spacingS,minWidth:u.spacingS,minHeight:u.spacingS,height:u.spacingS}},"")},k=({isChecked:o,className:r,isDisabled:u=!1,id:b,label:g,name:h,onBlur:f,onChange:p,onFocus:k,isRequired:y=!1,testId:x="cf-ui-controlled-input",type:v="checkbox",value:C,canBlurOnEsc:w=!0,isIndeterminate:R,inputProps:E,labelProps:M,...I},B)=>{const q=a(null),S=t(m.input,{[m.inputRadioButton]:"radio"===v,[m.inputCheckbox]:"checkbox"===v,[m.inputDisabled]:u},null==E?void 0:E.className),N=t(m.container,r),z=t(m.ghost,{[m.ghostRadioButton]:"radio"===v,[m.ghostCheckbox]:"checkbox"===v},null==M?void 0:M.className),D=l((e=>{e.persist(),"Escape"===e.nativeEvent.code&&w&&e.currentTarget.blur()}),[w]);i((()=>{q.current.indeterminate=R}),[R]);const O={size:"medium",variant:u?"secondary":"white"};return n.createElement(d,e({as:"div",display:"inline-block",ref:B,testId:x},I,{className:N}),n.createElement("input",e({},E,{className:S,value:C,name:h,checked:o,type:v,ref:q,onChange:e=>{p&&p(e)},onBlur:e=>{f&&f(e)},onFocus:e=>{k&&k(e)},"aria-label":g,id:b,required:y,disabled:u,onKeyDown:D})),"radio"===v?n.createElement("label",e({},M,{className:z,htmlFor:b}),n.createElement("span",null)):n.createElement("label",e({},M,{className:z,htmlFor:b}),R?n.createElement(c,O):n.createElement(s,O)))},y=n.forwardRef(k);var x={};g(x,"Checkbox",(()=>C));const v=({testId:t="cf-ui-checkbox",...o},r)=>n.createElement(y,e({testId:t,type:"checkbox",ref:r},o)),C=n.forwardRef(v);var w={};g(w,"RadioButton",(()=>E));const R=({testId:t="cf-ui-radio-button",...o},r)=>n.createElement(y,e({testId:t,type:"radio",ref:r},o)),E=n.forwardRef(R);b(f,p),b(f,x),b(f,w),b(module.exports,f);
+var e=h(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),r=require("react"),n=h(r),{useRef:i,useCallback:a,useEffect:l}=r,{Minus:c,Done:s}=require("@contentful/f36-icons"),{Box:d}=require("@contentful/f36-core"),u=h(require("@contentful/f36-tokens"));function b(e,t){return Object.keys(t).forEach((function(o){"default"!==o&&"__esModule"!==o&&Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[o]}})})),e}function g(e,t,o,r){Object.defineProperty(e,t,{get:o,set:r,enumerable:!0,configurable:!0})}function h(e){return e&&e.__esModule?e.default:e}var f={},p={};g(p,"ControlledInput",(()=>k));const m=({isChecked:r,className:b,isDisabled:g=!1,id:h,label:f,name:p,onBlur:m,onChange:k,onFocus:y,isRequired:x=!1,testId:v="cf-ui-controlled-input",type:C="checkbox",value:w,canBlurOnEsc:R=!0,isIndeterminate:E,inputProps:M,labelProps:I,...B},q)=>{const S=i(null),N={container:o({position:"relative",textOverflow:"ellipsis",lineHeight:u.lineHeightL,margin:"0",width:u.spacingM,height:u.spacingM,minHeight:u.spacingM,overflow:"visible"},""),input:o({display:"inline-block",fontSize:u.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:u.spacingM,height:u.spacingM,zIndex:u.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:u.glowPrimary},"&:checked + label":{borderColor:u.blue600,background:u.blue600},"&:disabled + label":{borderColor:u.gray300,background:u.gray300}},""),inputDisabled:o({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:o({"&:checked":{"& + label::before":{background:u.colorWhite},"&:disabled + label::before":{background:u.gray600}},"&:disabled + label::before":{background:u.gray300}},""),inputCheckbox:o({"&:checked, &:indeterminate":{"& + label":{borderColor:u.blue600,background:u.blue600},"&:disabled + label svg":{fill:u.gray600}},"&:disabled":{"& + label":{borderColor:u.gray300,background:u.gray300,"& svg":{fill:u.gray300}}}},""),ghost:o({background:u.colorWhite,width:u.spacingM,height:u.spacingM,border:`2px solid ${u.gray300}`,fill:u.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:o({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:u.colorWhite,width:u.borderRadiusMedium,height:u.borderRadiusMedium}},""),ghostCheckbox:o({borderRadius:"20%",svg:{width:u.spacingS,minWidth:u.spacingS,minHeight:u.spacingS,height:u.spacingS}},"")},z=t(N.input,{[N.inputRadioButton]:"radio"===C,[N.inputCheckbox]:"checkbox"===C,[N.inputDisabled]:g},null==M?void 0:M.className),D=t(N.container,b),O=t(N.ghost,{[N.ghostRadioButton]:"radio"===C,[N.ghostCheckbox]:"checkbox"===C},null==I?void 0:I.className),P=a((e=>{e.persist(),"Escape"===e.nativeEvent.code&&R&&e.currentTarget.blur()}),[R]);l((()=>{S.current.indeterminate=E}),[E]);const W={size:"medium",variant:g?"secondary":"white"};return n.createElement(d,e({as:"div",display:"inline-block",ref:q,testId:v},B,{className:D}),n.createElement("input",e({},M,{className:z,value:w,name:p,checked:r,type:C,ref:S,onChange:e=>{k&&k(e)},onBlur:e=>{m&&m(e)},onFocus:e=>{y&&y(e)},"aria-label":f,id:h,required:x,disabled:g,onKeyDown:P})),"radio"===C?n.createElement("label",e({},I,{className:O,htmlFor:h}),n.createElement("span",null)):n.createElement("label",e({},I,{className:O,htmlFor:h}),E?n.createElement(c,W):n.createElement(s,W)))},k=n.forwardRef(m);var y={};g(y,"Checkbox",(()=>v));const x=({testId:t="cf-ui-checkbox",...o},r)=>n.createElement(k,e({testId:t,type:"checkbox",ref:r},o)),v=n.forwardRef(x);var C={};g(C,"RadioButton",(()=>R));const w=({testId:t="cf-ui-radio-button",...o},r)=>n.createElement(k,e({testId:t,type:"radio",ref:r},o)),R=n.forwardRef(w);b(f,p),b(f,y),b(f,C),b(module.exports,f);
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as t}from"emotion";import a,{useCallback as r,useRef as n,useEffect as i}from"react";import{Done as l,Minus as s}from"@contentful/f36-icons";import{Box as c}from"@contentful/f36-core";import d from"@contentful/f36-tokens";function u(e,o){return Object.keys(o).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return o[t]}})})),e}function b(e,o,t,a){Object.defineProperty(e,o,{get:t,set:a,enumerable:!0,configurable:!0})}var g={},h={};b(h,"ControlledInput",(()=>p));const f={container:t({position:"relative",textOverflow:"ellipsis",lineHeight:d.lineHeightL,margin:"0",width:d.spacingM,height:d.spacingM,minHeight:d.spacingM,overflow:"visible"},""),input:t({display:"inline-block",fontSize:d.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:d.spacingM,height:d.spacingM,zIndex:d.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:d.glowPrimary},"&:checked + label":{borderColor:d.blue600,background:d.blue600},"&:disabled + label":{borderColor:d.gray300,background:d.gray300}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:d.colorWhite},"&:disabled + label::before":{background:d.gray600}},"&:disabled + label::before":{background:d.gray300}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:d.blue600,background:d.blue600},"&:disabled + label svg":{fill:d.gray600}},"&:disabled":{"& + label":{borderColor:d.gray300,background:d.gray300,"& svg":{fill:d.gray300}}}},""),ghost:t({background:d.colorWhite,width:d.spacingM,height:d.spacingM,border:`2px solid ${d.gray300}`,fill:d.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:t({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:d.colorWhite,width:d.borderRadiusMedium,height:d.borderRadiusMedium}},""),ghostCheckbox:t({borderRadius:"20%",svg:{width:d.spacingS,minWidth:d.spacingS,minHeight:d.spacingS,height:d.spacingS}},"")},m=({isChecked:t,className:d,isDisabled:u=!1,id:b,label:g,name:h,onBlur:m,onChange:p,onFocus:k,isRequired:y=!1,testId:x="cf-ui-controlled-input",type:v="checkbox",value:C,canBlurOnEsc:R=!0,isIndeterminate:w,inputProps:E,labelProps:I,...M},B)=>{const S=n(null),N=o(f.input,{[f.inputRadioButton]:"radio"===v,[f.inputCheckbox]:"checkbox"===v,[f.inputDisabled]:u},null==E?void 0:E.className),z=o(f.container,d),D=o(f.ghost,{[f.ghostRadioButton]:"radio"===v,[f.ghostCheckbox]:"checkbox"===v},null==I?void 0:I.className),O=r((e=>{e.persist(),"Escape"===e.nativeEvent.code&&R&&e.currentTarget.blur()}),[R]);i((()=>{S.current.indeterminate=w}),[w]);const P={size:"medium",variant:u?"secondary":"white"};return a.createElement(c,e({as:"div",display:"inline-block",ref:B,testId:x},M,{className:z}),a.createElement("input",e({},E,{className:N,value:C,name:h,checked:t,type:v,ref:S,onChange:e=>{p&&p(e)},onBlur:e=>{m&&m(e)},onFocus:e=>{k&&k(e)},"aria-label":g,id:b,required:y,disabled:u,onKeyDown:O})),"radio"===v?a.createElement("label",e({},I,{className:D,htmlFor:b}),a.createElement("span",null)):a.createElement("label",e({},I,{className:D,htmlFor:b}),w?a.createElement(s,P):a.createElement(l,P)))},p=a.forwardRef(m);var k={};b(k,"Checkbox",(()=>x));const y=({testId:o="cf-ui-checkbox",...t},r)=>a.createElement(p,e({testId:o,type:"checkbox",ref:r},t)),x=a.forwardRef(y);var v={};b(v,"RadioButton",(()=>R));const C=({testId:o="cf-ui-radio-button",...t},r)=>a.createElement(p,e({testId:o,type:"radio",ref:r},t)),R=a.forwardRef(C);u(g,h),u(g,k),u(g,v);export{p as ControlledInput,x as Checkbox,R as RadioButton};
+import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as t}from"emotion";import a,{useCallback as r,useRef as n,useEffect as i}from"react";import{Minus as l,Done as s}from"@contentful/f36-icons";import{Box as c}from"@contentful/f36-core";import d from"@contentful/f36-tokens";function u(e,o){return Object.keys(o).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return o[t]}})})),e}function b(e,o,t,a){Object.defineProperty(e,o,{get:t,set:a,enumerable:!0,configurable:!0})}var g={},h={};b(h,"ControlledInput",(()=>m));const f=({isChecked:u,className:b,isDisabled:g=!1,id:h,label:f,name:m,onBlur:p,onChange:k,onFocus:y,isRequired:x=!1,testId:v="cf-ui-controlled-input",type:C="checkbox",value:R,canBlurOnEsc:w=!0,isIndeterminate:E,inputProps:I,labelProps:M,...B},S)=>{const N=n(null),z={container:t({position:"relative",textOverflow:"ellipsis",lineHeight:d.lineHeightL,margin:"0",width:d.spacingM,height:d.spacingM,minHeight:d.spacingM,overflow:"visible"},""),input:t({display:"inline-block",fontSize:d.fontSizeM,opacity:"0",position:"absolute",margin:"0",width:d.spacingM,height:d.spacingM,zIndex:d.zIndexDefault,cursor:"pointer","&:focus + label":{outline:"none",boxShadow:d.glowPrimary},"&:checked + label":{borderColor:d.blue600,background:d.blue600},"&:disabled + label":{borderColor:d.gray300,background:d.gray300}},""),inputDisabled:t({name:"vdhlfv",styles:"cursor:not-allowed;"}),inputRadioButton:t({"&:checked":{"& + label::before":{background:d.colorWhite},"&:disabled + label::before":{background:d.gray600}},"&:disabled + label::before":{background:d.gray300}},""),inputCheckbox:t({"&:checked, &:indeterminate":{"& + label":{borderColor:d.blue600,background:d.blue600},"&:disabled + label svg":{fill:d.gray600}},"&:disabled":{"& + label":{borderColor:d.gray300,background:d.gray300,"& svg":{fill:d.gray300}}}},""),ghost:t({background:d.colorWhite,width:d.spacingM,height:d.spacingM,border:`2px solid ${d.gray300}`,fill:d.colorWhite,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box"},""),ghostRadioButton:t({borderRadius:"50%","&:before":{content:'""',borderRadius:"50%",backgroundColor:d.colorWhite,width:d.borderRadiusMedium,height:d.borderRadiusMedium}},""),ghostCheckbox:t({borderRadius:"20%",svg:{width:d.spacingS,minWidth:d.spacingS,minHeight:d.spacingS,height:d.spacingS}},"")},D=o(z.input,{[z.inputRadioButton]:"radio"===C,[z.inputCheckbox]:"checkbox"===C,[z.inputDisabled]:g},null==I?void 0:I.className),O=o(z.container,b),P=o(z.ghost,{[z.ghostRadioButton]:"radio"===C,[z.ghostCheckbox]:"checkbox"===C},null==M?void 0:M.className),W=r((e=>{e.persist(),"Escape"===e.nativeEvent.code&&w&&e.currentTarget.blur()}),[w]);i((()=>{N.current.indeterminate=E}),[E]);const j={size:"medium",variant:g?"secondary":"white"};return a.createElement(c,e({as:"div",display:"inline-block",ref:S,testId:v},B,{className:O}),a.createElement("input",e({},I,{className:D,value:R,name:m,checked:u,type:C,ref:N,onChange:e=>{k&&k(e)},onBlur:e=>{p&&p(e)},onFocus:e=>{y&&y(e)},"aria-label":f,id:h,required:x,disabled:g,onKeyDown:W})),"radio"===C?a.createElement("label",e({},M,{className:P,htmlFor:h}),a.createElement("span",null)):a.createElement("label",e({},M,{className:P,htmlFor:h}),E?a.createElement(l,j):a.createElement(s,j)))},m=a.forwardRef(f);var p={};b(p,"Checkbox",(()=>y));const k=({testId:o="cf-ui-checkbox",...t},r)=>a.createElement(m,e({testId:o,type:"checkbox",ref:r},t)),y=a.forwardRef(k);var x={};b(x,"RadioButton",(()=>C));const v=({testId:o="cf-ui-radio-button",...t},r)=>a.createElement(m,e({testId:o,type:"radio",ref:r},t)),C=a.forwardRef(v);u(g,h),u(g,p),u(g,x);export{m as ControlledInput,y as Checkbox,C as RadioButton};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-inputs",
-  "version": "4.0.1-next-v4-5860.2171+c6b1cde4",
+  "version": "4.0.1-next-v4-6174.2195+eac2d8db",
   "description": "Forma 36: Input React Components",
@@ -25,5 +25,5 @@ "license": "MIT",
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-5860.2171+c6b1cde4",
-    "@contentful/f36-icons": "4.0.1-next-v4-5860.2171+c6b1cde4",
-    "@contentful/f36-tokens": "4.0.1-next-v4-5860.2171+c6b1cde4",
+    "@contentful/f36-core": "4.0.1-next-v4-6174.2195+eac2d8db",
+    "@contentful/f36-icons": "4.0.1-next-v4-6174.2195+eac2d8db",
+    "@contentful/f36-tokens": "4.0.1-next-v4-6174.2195+eac2d8db",
     "emotion": "^10.0.17"
@@ -37,3 +37,3 @@ },
   },
-  "gitHead": "c6b1cde4bed22b5a959ed4dd61ad9c963fc09a60"
+  "gitHead": "eac2d8db77c35a1fe0f851b98e347ea9b27ba352"
 }

src/controlled-input/ControlledInput.styles.ts

 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 
-export const styles = {
-  container: css({
-    position: 'relative',
-    textOverflow: 'ellipsis',
-    lineHeight: tokens.lineHeightL,
-    margin: '0',
-    width: tokens.spacingM,
-    height: tokens.spacingM,
-    minHeight: tokens.spacingM,
-    overflow: 'visible',
-  }),
-  input: css({
-    display: 'inline-block',
-    fontSize: tokens.fontSizeM,
-    opacity: '0',
-    position: 'absolute',
-    margin: '0',
-    width: tokens.spacingM,
-    height: tokens.spacingM,
-    zIndex: tokens.zIndexDefault,
-    cursor: 'pointer',
-    '&:focus + label': {
-      outline: 'none',
-      boxShadow: tokens.glowPrimary,
-    },
-    '&:checked + label': {
-      borderColor: tokens.blue600,
-      background: tokens.blue600,
-    },
-    '&:disabled + label': {
-      borderColor: tokens.gray300,
-      background: tokens.gray300,
-    },
-  }),
-  inputDisabled: css({
-    cursor: 'not-allowed',
-  }),
-  inputRadioButton: css({
-    '&:checked': {
-      '& + label::before': {
-        background: tokens.colorWhite,
+export const getStyles = () => {
+  return {
+    container: css({
+      position: 'relative',
+      textOverflow: 'ellipsis',
+      lineHeight: tokens.lineHeightL,
+      margin: '0',
+      width: tokens.spacingM,
+      height: tokens.spacingM,
+      minHeight: tokens.spacingM,
+      overflow: 'visible',
+    }),
+    input: css({
+      display: 'inline-block',
+      fontSize: tokens.fontSizeM,
+      opacity: '0',
+      position: 'absolute',
+      margin: '0',
+      width: tokens.spacingM,
+      height: tokens.spacingM,
+      zIndex: tokens.zIndexDefault,
+      cursor: 'pointer',
+      '&:focus + label': {
+        outline: 'none',
+        boxShadow: tokens.glowPrimary,
       },
-      '&:disabled + label::before': {
-        background: tokens.gray600,
-      },
-    },
-    '&:disabled + label::before': {
-      background: tokens.gray300,
-    },
-  }),
-  inputCheckbox: css({
-    '&:checked, &:indeterminate': {
-      '& + label': {
+      '&:checked + label': {
         borderColor: tokens.blue600,
         background: tokens.blue600,
       },
-      '&:disabled + label svg': {
-        fill: tokens.gray600,
-      },
-    },
-    '&:disabled': {
-      '& + label': {
+      '&:disabled + label': {
         borderColor: tokens.gray300,
         background: tokens.gray300,
-        '& svg': {
-          fill: tokens.gray300,
+      },
+    }),
+    inputDisabled: css({
+      cursor: 'not-allowed',
+    }),
+    inputRadioButton: css({
+      '&:checked': {
+        '& + label::before': {
+          background: tokens.colorWhite,
         },
+        '&:disabled + label::before': {
+          background: tokens.gray600,
+        },
       },
-    },
-  }),
-  ghost: css({
-    background: tokens.colorWhite,
-    width: tokens.spacingM,
-    height: tokens.spacingM,
-    border: `2px solid ${tokens.gray300}`,
-    fill: tokens.colorWhite,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-  }),
-  ghostRadioButton: css({
-    borderRadius: '50%',
-    '&:before': {
-      content: '""',
+      '&:disabled + label::before': {
+        background: tokens.gray300,
+      },
+    }),
+    inputCheckbox: css({
+      '&:checked, &:indeterminate': {
+        '& + label': {
+          borderColor: tokens.blue600,
+          background: tokens.blue600,
+        },
+        '&:disabled + label svg': {
+          fill: tokens.gray600,
+        },
+      },
+      '&:disabled': {
+        '& + label': {
+          borderColor: tokens.gray300,
+          background: tokens.gray300,
+          '& svg': {
+            fill: tokens.gray300,
+          },
+        },
+      },
+    }),
+    ghost: css({
+      background: tokens.colorWhite,
+      width: tokens.spacingM,
+      height: tokens.spacingM,
+      border: `2px solid ${tokens.gray300}`,
+      fill: tokens.colorWhite,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSizing: 'border-box',
+    }),
+    ghostRadioButton: css({
       borderRadius: '50%',
-      backgroundColor: tokens.colorWhite,
-      width: tokens.borderRadiusMedium,
-      height: tokens.borderRadiusMedium,
-    },
-  }),
-  ghostCheckbox: css({
-    borderRadius: '20%',
-    svg: {
-      width: tokens.spacingS,
-      minWidth: tokens.spacingS,
-      minHeight: tokens.spacingS,
-      height: tokens.spacingS,
-    },
-  }),
+      '&:before': {
+        content: '""',
+        borderRadius: '50%',
+        backgroundColor: tokens.colorWhite,
+        width: tokens.borderRadiusMedium,
+        height: tokens.borderRadiusMedium,
+      },
+    }),
+    ghostCheckbox: css({
+      borderRadius: '20%',
+      svg: {
+        width: tokens.spacingS,
+        minWidth: tokens.spacingS,
+        minHeight: tokens.spacingS,
+        height: tokens.spacingS,
+      },
+    }),
+  };
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Lines of code

486

increased by2.53%

Worsened metrics

Total package byte prevSize

129947

decreased by-11.72%

Number of package files

24

decreased by-11.11%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-6174.2195+eac2d8db

• Updated@contentful/f36-icons@4.0.1-next-v4-6174.2195+eac2d8db

• Updated@contentful/f36-tokens@4.0.1-next-v4-6174.2195+eac2d8db